• RxJS와 함께하는 함수형 리액티브 프로그래밍
  • 원문: Introduction to Functional Reactive Programming with RxJS

Angular로 첫 프로젝트를 만들며 사용한 기술 중 RxJS에 대한 질문을 받았는데, 그 때는 RxJS가 어떤 기술인지 자세히 알지 못했단 느낌이었다.

만약 RxJS로 짠 로직을 Promise로 짠다면 어떻게 될 것인가 고민하다가 위의 글을 발견했고, 다시 생각해보니 근본적으로 잘못 생각하고 있다는 걸 알게되었다.

JavaScript에서 데이터를 반환받는 디자인패턴

자바스크립트 ES6 환경에서 데이터를 반환받는다면 1회성/여러번과 동기/비동기로 나누어 생각해 볼 수 있다.

1. 함수는 한 개의 결과를 동기적으로 반환
2. 프로미스는 한 개의 결과를 비동기로 반환
3. 제너레이터는 여러 개의 결과를 동기적으로 반환

마지막으로

4. 옵저버블은 여러 개의 결과를 비동기적으로 반환

으로 정리할 수 있다. 첫 그림은 이를 시각적으로 잘 표현하여 가져왔다.

왜 RxJS를 사용하는가

RxJS의 공식 웹페이지에 제시된 소개를 거의 인용하자면

ReactiveX는 Observer 패턴을 Iterator 패턴과 결합 하고 함수형 프로그래밍을 컬렉션과 결합하여 이벤트 시퀀스를 관리하는 이상적인 방법에 대한 요구 사항을 충족합니다.

ReactiveX combines the Observer pattern with the Iterator pattern and functional programming with collections to fill the need for an ideal way of managing sequences of events.

다음 글에서는 공식 웹페이지에 소개된 RxJS의 사용예를 조금 수정하여 위에서 강조 표시한 Observer 패턴 Iterator 패턴 함수형 프로그래밍과 컬렉션을 케바케로 소개하겠다.