Reactive Programming with Rxjs

이상훈
상훈 Devlog
Published in
6 min readOct 15, 2018

Reactive Programming

비동기 데이터 스트림에 기반을 둔 프로그래밍 패턴 중 하나이다. 여기서 데이터 스트림이란 연속적인 데이터의 흐름이며 Reactive Programming은 기본적으로 배열 데이터, Ajax 통신 결과, 마우스 클릭 이벤트 등 말그대로 모든 것을 데이터 스트림으로 본다.

한번에 다수의 연속성을 갖는 데이터를 처리할 수 있으며 서버로 보낸 요청을 취소할 수도 있기에 비동기 처리 방식에서 좀 더 유연한 방식이라고 볼 수 있다. 또한 다양한 데이터 유형을 Observable로 만들어 일관된 처리 방식을 제공하기 때문에 개발 시에 좀 더 명료하고 직관적으로 생각할 수 있다.

Push Scenario

어플리케이션이 외부 환경과 통신하는 방식은 크게 두가지 시나리오가 있을 수 있다.

  • Pull 시나리오: 어플리케이션이 외부 환경에 명령하여 원하는 결과를 응답받고 처리
  • Push 시나리오: 어플리케이션이 외부 환경에 명령하고 응답이 오기까지 기다리지 않고 외부에서 응답이 오면 그때 반응하여 처리

옵저버블 패턴에서는 Push 시나리오가 적용되었다고 볼 수 있다. 제어의 흐름을 통제할 권한을 외부 환경으로 넘김으 로써 응답 대기 비용을 줄일 수 있어 비동기 처리에 유리하게 된다.

Observable & Observer

Observable & Observer 관계, https://www.dunebook.com/reactive-programming-with-angular-2/

Observable이란 외부 환경에서 어플리케이션 내부로 연속해서 흐르는 데이터를 의미한다. 앞서 언급한 데이터 스트림을 생성하고 방출하는 객체이다.

Observer란 Observable이 방출한 정보를 획득하고 사용하는 객체이다.

Cold Observable & Hot Observable

Cold Observable 마블 다이어그램, https://medium.com/@felice.geracitano/multicasted-observables-in-rxjs-b39e0c66837f

Observable은 기본적으로 구독되기 전까지 동작하지 않는다. 또한 Observer가 구독을 시작하면 Observable이 갖는 데이터의 처음부터 받기 시작한다. 즉 Observable이 방출하는 모든 데이터를 구독하는 시점에 상관없이 모두 받는다는 의미이다.

Observable을 구독하는 모든 Observer는 해당 Observer를 위해 독립적으로 실행하는 Observable을 가지게 되며 이것을 유니캐스트 방식이라고 한다.

Hot Observable 마블 다이어그램, https://medium.com/@felice.geracitano/multicasted-observables-in-rxjs-b39e0c66837f

Cold Observable과 반대로 Hot Observable은 생성하자마자 구독과 상관 없이 곧바로 데이터 스트림을 방출한다. 즉 데이터 스트림을 방출하기 전 구독을 한다고 해서 그 정보를 획득할 수 없으며 일정시간이 지난 시점이라도 데이터 스트림의 이전 부분은 획득할 수 없다.

기본적으로 Rxjs의 Observable은 Code Observable 방식이고, Subject를 사용하여 Hot Observable을 구현할 수 있다. Subject는 Observable이면서 Observer이기도 한 객체이다. Observable을 구독할 수 있으면서도 Observer처럼 next(), complete()등의 메소드를 호출 할 수있다.

다시 본론으로 돌아와, Hot Observable은 구독하고 있는 모든 Observer에게 모두 전파하게 되며 각각의 Observer들은 사이드 이팩트가 발생하게 되며 이를 멀티캐스트 방식이라고 한다.

유니캐스트 방식일지 멀티캐스트 방식일지 구현 요구사항에 따라 Cold Observable을 사용하거나 Hot Observable을 사용하여 처리한다.

유니캐스트 방식과 멀티캐스트 방식은 다음 예제 코드를 참고한다. stackblitz exam

Operators

Operators는 Observable을 생성, 변환, 필터링, 결합, 에러 처리, 집계 연산 등의 기능을 하는 함수이다. Operator의 반환형은 모두 Observable이기 때문에 Operator들을 연달아 호출할 수 있는 체이닝 방식이 가능하다.

Reactivex.io 에서는 이 Operators들을 카테고리 별로 목록을 제공하고 있어 어떤 Operators들이 있는지 확인 할 수 있다.

Rxjs Operators, http://reactivex.io/documentation/ko/operators.html

rxmarbles.com에서는 Operator들의 마블 다이어그램을 확인 할 수 있어 다소 이해하기 까다로운 연산도 비교적 쉽게 이해할 수 있다.

Operators 마블 다이어그램, http://rxmarbles.com/

I felt that ..

Angular 프로젝트를 개발할 때 Rxjs를 사용하게 되었는데 그간에 느낀점은 다음과 같다.

  • 각기 다른 유형의 데이터 스트림을 일관된 방식으로 처리한다는 점이 개발을 하는데 있어 신경쓸 것을 하나 없앤 느낌이다.
  • 복잡하거나 까다로울 수 있는 데이터 스트림 처리를 적절한 오퍼레이터 조합으로 쉽고 명료하게 할 수 있었다.
  • Subject, Scheduler 등의 개념부터는 이해하기가 쉽지 않다. 다소 러닝커브가 있다.
  • rxjs 모듈을 임폴트하는 것이 번거롭고 길었었는데 rxjs6 부터는 내부구조가 바뀌어 Observable, Subject, pipe, operators등의 임폴트하는 방식이 명료해졌다.

--

--

이상훈
상훈 Devlog

Frontend Developer 😁😁 #angular #javascript #typescript #scala #node