[RxJS] Subjects

Hot Observable 은 구독하고 있는 Observer들과 데이터를 공유하기 때문에 구독하기 전까지는 데이터를 전달받을 수 없다. 그렇다면 구독 전에 Observable이 전달했던 데이터들은 그대로 소실되는 게 아닌가? RxJS에서는 이를 위해 다양한 Subject를 제공한다.

BehaviorSubject

데이터가 전달되기 전에 구독되어있다면, 초기값을 전달해주는 Subject. 데이터가 전달된 이후로는 구독된 시점과 상관없이 마지막 상태를 전달한다. 유일하게 getValue() 메서드를 제공하여 마지막 값을 얻을 수 있다.

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject('start');

subject.subscribe({
  next: (v) => console.log(`Observer A : ${v}`),
  complete: () => console.log('Observer A completed'),
});

subject.next('1');
subject.next('2');

subject.subscribe({
  next: (v) => console.log(`Observer B : ${v}`),
  complete: () => console.log('Observer B completed'),
});

subject.complete();

setTimeout(() => {
  subject.subscribe({
    next: (v) => console.log(`Observer C : ${v}`),
    complete: () => console.log('Observer C completed'),
  });
}, 2000);

//Observer A : start
//Observer A : 1
//Observer A : 2
//Observer B : 2
//Observer A completed
//Observer B completed
//Observer C completed

ReplaySubject

말그대로 buffersize만큼 전달된 데이터를 저장하고 있다가 구독될 때 가장 최근 buffersize 만큼 데이터를 전달해준다. 또한 windowTime을 지정할 수 있어서 전달된 시각을 기준으로 데이터를 보관할 수 있다.

new ReplaySubject(buffersize? number, windowTime?: number);

const subject = new ReplaySubject(2);

subject.subscribe({
  next: (v) => console.log(`observer A : ${v}`),
  complete: () => console.log('oberser A complete'),
});

subject.next(1);
subject.next(2);
subject.next(3);
subject.next(4);

subject.subscribe({
  next: (v) => console.log(`observer B : ${v}`),
  complete: () => console.log('oberser B complete'),
});

subject.complete();

setTimeout(() => {
  subject.subscribe({
    next: (v) => console.log(`observer C : ${v}`),
    complete: () => console.log('oberser C complete'),
  });
});

//observer A : 1
//observer A : 2
//observer A : 3
//observer A : 4
//observer B : 3
//observer B : 4
//oberser A complete
//oberser B complete
//observer C : 3
//observer C : 4
//oberser C complete

AsyncSubject

complete가 호출되었을 때 마지막 하나의 값만 next하고 종료되는 Subject. complete 되지 않으면 어떤 데이터도 전달하지 않는다.

const subject = new AsyncSubject();

subject.subscribe({
  next: (v) => console.log(`observer A : ${v}`),
  complete: () => console.log('oberser A complete'),
});

subject.next(1);
subject.next(2);
subject.next(3);
subject.next(4);

subject.subscribe({
  next: (v) => console.log(`observer B : ${v}`),
  complete: () => console.log('oberser B complete'),
});

subject.complete();

//observer A : 4
//observer B : 4
//oberser A complete
//oberser B complete

비동기 스케쥴러

• 비동기 작업으로 등록되는 작업은 task, microtask, animationFrame 작업으로 구분된다.
• 우선순위 : Microtask Queue > Animation Frames > Task Queue
• requestAnimationFrame이 호출되고 이후 브라우저 렌더링이 발생한다.