RxJS 개념 정리

RxJS는 Reactive Extensions For JavaScript 라이브러리이다.
여기서 Reactive Extensions 는 ReactiveX 프로젝트에서 출발한 리액티브 프로그래밍을 지원하기위해 확장했다는 뜻이다.

 

ReactiveX 는 Observer 패턴, Iterator 패턴, 함수형 프로그래밍을 조합하여 제공한다.

- Observer 패턴이란?

객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다(무슨말이지????)

라고 위키에 쓰여있다

 

간단히 말하자면, 어떤 객체의 상태가 변할 때 그와 연관된 객체들에게 알림을 보내는 디자인이 패턴이라고 할 수 있다.

예를 들면, 자바스크립트의 addEventListener 메서드와 같이 이벤트를 전파하는 방식이라고 생각하면 될 것 이다.

즉, 특정 이벤트를 관찰할 옵저버(리스너)를 등록한 후 해당 이벤트가 발생했을 때 알려준다는 것이다.

 

RxJS는 이벤트 스트림을 Observable 이라는 객체로 표현한 후 비동기 이벤트 기반의 프로그램 작성을 돕는다.

 

리액티브 프로그래밍이란

리액티브 프로그래밍이란 이벤트나 배열 같은 데이터 스트림을 비동기로 처리해 변화에 유연하게 반응하는 프로그래밍 패러다임 이다.

외부와 통신하는 방식은 Pull 과 Push 시나리오가 있을 수 있다.

• Pull 시나리오
  외부에서 명령하여 응답받고 처리한다.
  데이터를 가지고 오기 위해서는 계속 호출해야 한다.
• Push 시나리오
  외부에서 명령하고 기다리지 않고, 응답이 오면 그때 반응하여 처리한다
  데이터를 가지고 오기 위해서 구독해야 한다.

Reactive Programming 은 Push 시나리오를 채택하고 있다.

 

RxJS

- 비동기 코드가 많아지면 그만큼 제어의 흐름이 복잡하게 얽혀 코드를 예측하기 어려워진다.

 

- RxJS 는 Javascript 의 비동기 프로그래밍의 문제를 해결하는데 도움을 준다.

 

- RxJS는 Observer 패턴을 적용한 Observable 이라는 객체를 중심으로 동작한다.

 

RxJS 옵저버블과 옵저버

- 옵저버블은 특정 객체를 관찰하는 옵저버에게 여러 이벤트나 값을 보내는 역할을 한다

- 옵저버블에 subscribe 가 호출되어야 옵저버블과 옵저버가 연결되어 실행된다

- 실행된 결과는 옵저버블의 next 가 실행되면서 확인할 수 있다

RxJS 의 옵저버 패턴

 

예시 코드는 아래와 같다

const { Observable } = require("rxjs");

const observableCreated$ = Observable.create(function(observer) {
    console.log("BEGIN Observable");
    observer.next(1);
    observer.next(2);
    observer.complete();
    console.log("END Observable");
});

observableCreated$.subscribe(
    function next(item) { 
    	console.log(item);
    },
    function error(e) {
    	console.log("error: ", e);
    },
    function complete() {
    	console.log("complete");
    } 
)

 

실행 결과는 다음과 같다

BEGIN Observable

1

2

complete

END Observable

 

subscribe 함수의 호출 부분을 주석 처리하면(호출하지 않으면) 아무 일도 하지 않는다

즉, 생성한 옵저버블은 옵저버에게 값을 전달하는 함수가 있지만 subscribe 함수가 호출되어야 옵저버블과 옵저버를 연결해 실행한다.

 

참고로 옵저버에는 3가지 메서드가 존재한다

- next: 옵저버블 구독자에게 데이터를 전달한다

- error: 에러나 예외가 발생하면 이를 전달받는다 이후에 next 및 complete 이벤트가 발생하지 않는다(구독 종료)

- complete: 정사적으로 옵저버블 구독을 완료하면 호출한다(완료 되었음을 알린다) next 이벤트가 발생하지 않는다(구독 종료)

 

RxJS Observable Lifecycle

1. 생성
   Observable.create()
   생성시점에는 어떠한 이벤트도 발생되지 않는다.
2. 구독
   Observable.subscribe()
   구독시점에 이벤트를 구독할 수 있다.
3. 실행
   observer.next()
   실행시점에 이벤트를 구독하고 있는 대상에게 값을 전달한다.
4. 구독 해제
   observer.complete()
   Observable.unsubscribe()
   구독 해제 시점에 구독하고 있는 모든 대상의 구독을 종료한다.

출처

RxJS 간단정리

 

RxJS 기초, 핵심 🐉

참고서적

75가지 핵심 문법과 예제로 익히는 RxJS 기초 RxJS 프로그래밍 (이종욱, 안재하 지음) 한빛미디어