RxJS의 ReplaySubject / Angular

RxJS의 ReplaySubject 

Reactive Programming(리액티브 프로그래밍)은 데이터 흐름과 그 변화를 관찰하며 반응하는 프로그래밍 패러다임입니다.

이 패러다임을 구현하기 위한 강력한 도구 중 하나가 RxJS(Reactive Extensions for JavaScript)입니다.

RxJS는 비동기 데이터 스트림을 처리하고, 이벤트 기반 프로그래밍을 단순화하는 데 매우 유용합니다.

 

ReplaySubject는 RxJS에서 제공하는 Subject 중 하나로, 구독한 시점 이전의 데이터를 재생(replay)하여 새로운 구독자에게 제공할 수 있는 기능을 제공합니다. 이 특성 덕분에 데이터 스트림에서 발생한 값을 캐싱하거나 초기 상태를 보존하는 데 유용하게 사용할 수 있습니다.

 

 

주요 특징

1. 버퍼 크기(Buffer Size)
   • ReplaySubject는 기본적으로 발생한 모든 값을 저장하지만, 버퍼 크기를 지정하면 최근에 발생한 값 중 지정한 개수만큼만 저장합니다.
2. 타임 윈도우(Time Window)
   • 타임 윈도우를 설정하면 특정 시간 동안 발생한 값만 저장하고, 이후의 값은 제거됩니다.
3. 멀티캐스트(Multicast)
   • ReplaySubject는 여러 구독자에게 동일한 값을 전달할 수 있습니다.

 

 

---

 

기본 사용법

import { ReplaySubject } from 'rxjs';

const replaySubject = new ReplaySubject<number>();

replaySubject.next(1);
replaySubject.next(2);

replaySubject.subscribe(value => {
  console.log(`Subscriber A: ${value}`);
});

replaySubject.next(3);

replaySubject.subscribe(value => {
  console.log(`Subscriber B: ${value}`);
});

replaySubject.next(4);


//
Subscriber A: 1
Subscriber A: 2
Subscriber A: 3
Subscriber B: 1
Subscriber B: 2
Subscriber B: 3
Subscriber A: 4
Subscriber B: 4

 

위 예제에서 Subscriber A는 ReplaySubject가 발행한 모든 값을 받습니다.

Subscriber B는 구독 시점 이전의 값(1, 2, 3)을 재생하여 받고, 이후의 값(4)도 동일하게 전달받습니다.

 

버퍼 크기 설정

ReplaySubject의 버퍼 크기를 설정하면 메모리 사용량을 제한하면서도 필요한 만큼의 이전 데이터를 보존할 수 있습니다.

 

const replaySubject = new ReplaySubject<number>(2); // 최근 2개의 값만 저장

replaySubject.next(1);
replaySubject.next(2);
replaySubject.next(3);

replaySubject.subscribe(value => {
  console.log(`Subscriber A: ${value}`);
});

//
Subscriber A: 2
Subscriber A: 3

위 예제에서 ReplaySubject는 최근 2개의 값(2, 3)만 저장하고 있으므로, Subscriber A는 해당 값들만 전달받습니다.

 

 

타임 윈도우 설정

ReplaySubject는 버퍼 크기 외에도 타임 윈도우를 통해 특정 시간 동안만 값을 유지할 수 있습니다.

const replaySubject = new ReplaySubject<number>(Infinity, 2000); // 2초 동안 발생한 값만 저장

replaySubject.next(1);
setTimeout(() => replaySubject.next(2), 1000);
setTimeout(() => replaySubject.next(3), 3000);

setTimeout(() => {
  replaySubject.subscribe(value => {
    console.log(`Subscriber A: ${value}`);
  });
}, 4000);

//
Subscriber A: 3

위 예제에서 ReplaySubject는 2초 동안 발생한 값만 저장하도록 설정되었습니다. Subscriber A가 구독했을 때, 3초 전에 발생한 값(1, 2)은 제거되고, 마지막 값(3)만 전달됩니다.

 

 

 

---

활용 사례

1. 초기 상태 제공
   • ReplaySubject는 새로운 구독자가 데이터 스트림의 초기 상태를 쉽게 받을 수 있도록 도와줍니다.
2. 과거 이벤트 재생
   • 로그 데이터나 사용자 행동 데이터를 저장하고 재생하는 데 유용합니다.
3. 상태 관리
   • Angular, React 등에서 상태 관리를 구현할 때 ReplaySubject를 사용하여 컴포넌트 간의 데이터 공유 및 초기화를 간소화할 수 있습니다.