RxJS가 해결하려고 했던 문제 3

안녕하세요. 꼬동입니다.

 

마지막으로 로직 오류 남았었죠?

 

RxJS는 과연 어떻게 로직 오류를 해결하려했는지 알아보도록 합시다.

---

웹 애플리케이션은 전달받은 입력값을 로직을 통해 새로운 결과를 반환하거나 표현합니다.

 

이 과정에서 반복문과 분기문 그리고 변수가 사용되는데 이러한 것들은 우리의 코드를 복잡하게 만듭니다.

 

반복문은 가독성을 떨어뜨리고, 분기문은 파악해야하는 프로그램 흐름을 나누며, 변수의 값은 변경될 수 있습니다.

 

 JS의 경우엔 이를 함수형 프로그래밍의 특성으로 해결하려 했습니다. JS 함수는 일급 객체이기 때문에 이와 같은 솔루션이 가능했습니다.

결국 호머 심슨..?

거기에 더불어 고차 함수를 이용해서 문제를 손쉽게 해결하는 프로그래밍 기법이 탄생했습니다.

function process(people) {
	return people.results
    	.filter(user => /male|femail/.test(user.gender))
        .map(user => Object.assign(
        	user,
            logic(user.height, user.mass, user.gender)
        ))
        .reduce((acc, user) => {
        	acc.push(makeHtml(user));
            return acc;
		}, [])
        .join("");
}

이렇게 각 고차 함수에 전달되는 함수는 외부 변수에 영향을 미치지 않고 영향을 받지도 않아서 순수함수를 유지할 수 있습니다.

 

그렇다면 RxJS에서는 어떻게 이 개념을 이용하여 사용자가 편하게 개발할 수 있게 했을까요?

 

RxJS는 고차 함수와 같은 오퍼레이터(operator)를 제공함으로써 로직에 존재하는 반복문, 분기문, 변수를 제거하려 했습니다.

 

오퍼레이터의 경우엔 Observable을 조작하기 위한 로직이라고 생각하면 되는데, 오퍼레이터는 항상 새로운 Observable을 반환합니다. 

 

이를 불변 객체라고 도 하는데, 이는 생성 후 그 상태를 바꿀 수 없는 객체를 의미합니다. 외부에서 값을 변경할 수 없기 때문에 불변 객체를 사용하는 것만으로도 프로그램의 복잡도를 낮출 수 있습니다.

이처럼 링크드리스트가 된다.

오퍼레이터는 결국 옵저버블을 반환하기 때문에 데이터, 에러, 종료여부가 전달되거나 변형되어 구독한 Observer에게 전달이 됩니다.

ajax$
.pipe(
	switchMap(data => of(...data.results)),
    filter(user => /male|femail/.test(user.gender)),
    map(...),
    reduce(() => ...),
)
.subscribe(v => {...});

이런식으로 다양한 오퍼레이터를 거쳐 Observer에게 데이터가 전달되는 구조로 되어 있습니다.

 

정리

애플리케이션의 반복문, 분기문, 변수에 의한 복잡도를 함수형 프로그래밍으로 해결하려 했습니다.

 

RxJS는 이 개념을 이용하여 오퍼레이터라는 기능을 제공하여 이러한 복잡도를 낮추려고 노력했습니다.

 

이러한 RxJS의 오퍼레이터는 어휘와도 같기 때문에 필수적인 오퍼레이터는 알고 넘어가는 것이 개발에 있어서 큰 도움이 될 수 있습니다.

---

지금까지 RxJS가 해결하려고 했던 문제를 살펴 보았는데요.

 

제가 작성하면서 생략한 내용이 굉장히 많습니다.

 

그 이유는 아래의 책의 내용이 굉장히 좋은데 여러분들이 반드시 읽어봤으면 하는 바램으로 맛보기로 글을 작성했기 때문입니다.

 

만약, RxJS를 시작하실거라면 해당 책을 구매하시고 읽어보시는 것을 추천드립니다.

 

http://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&barcode=9791186710357 

RxJS 퀵스타트 - 교보문고

 

이상 RxJS가 해결하려고 했던 문제 3였습니다. ^_^