[RxJS] 핵심 개념 및 활용예시

RxJS 용어

자주 사용할 개념 몇 개만 정리. 자세한건 여기 참고.

Observable

primary type in RxJS.

Observer

consumer

consists of next error complete. if missing one of these elements, the observer is partial observer

Subscription

a contract where a consumer is observing values pushed by a producer

Subject

special type of observable that allows values to be multicasted to many observers

subject can be both consumer and producer

Multicast

hot observable

Unicast

cold observable

예시

동작

• rxjs 로 반복문 없이 루프를 돌린다.
• 1 부터 시작해 이전 값의 2를 곱한 값 출력을 반복한다.
• 각 출력 사이에 10 ms 의 delay 존재

코드

import { Subject, delay, map, tap } from 'rxjs';

const subject = new Subject<bigint>();

subject
  .pipe(
    tap((v) => console.log(v)),
    delay(10),
    map((val) => val * 2n),
  )
  .subscribe({
    next: (v) => subject.next(v),
  });

subject.next(1n);

설명

• bigint type 을 주고받을 수 있는 subject 생성
• 해당 subject 를 subscribe 하는 observable 생성
  • pipe: subject 에서 받은 값을 인자로 받은 첫 번째 함수에 넣는다. 인자로 받은 함수들은 이전 함수의 리턴값을 받아 실행 후 다음 함수에 값을 리턴한다.
  • tap: notification 을 위한 side-effect 가 포함된 작업 수행. 다른 함수에서 notification 작업을 수행할 수 있지만 map 과 같은 함수에 해당 작업을 추가하면 impure 해지는 관계로 이 함수가 side-effect 가 포함된 작업을 도맡는다.
  • delay: 일정 기간 동안 source observable 에서 값이 emit 되는 것을 막는다. 위 코드에서처 인자로 1000 의 값을 주면 1초마다 한 번씩 2를 곱하는 작업을 수행한다.
  • map: array 나 lodash 에서 자주 사용하는 map 과 동일. subject 에서 받은 값에 2를 곱한다.
  • subscribe: observer 가 observable 를 구독하도록 연결. 이 코드에서는 반복문처럼 돌리기 위해서 2를 곱한 값을 observer 가 받아서 다시 subject 에 넣어준다.
  • subject.next(1n): subject 에 초기 값으로 1을 넣어준다. bigint 타입이므로 뒤에 n 이 붙는다.

output

1n
2n
4n
8n
16n
32n
64n
128n
256n
512n
1024n
2048n
4096n
8192n
16384n
32768n
...