RxJS - 관찰자 및 구독

다시 오신 것을 환영합니다.
오늘 기사의 주제는 관찰자와 구독입니다.

관찰자

관찰자는 가치의 소비자입니다. 옵저버는 옵저버블에 의해 방출된 값에 관심이 있는 것입니다. RxJS에서 Observer는 단순히 콜백 세트(다음, 오류, 완료)입니다.
다음은 관찰자의 간단한 예입니다.

import { Observer } from "rxjs";

const observer: Observer<string> = {
  next: (value: string) =>
    console.log(`[observer] next`, value),
  error: (error: Error) =>
    console.error(`[observer] error`, error),
  complete: () =>
    console.log(`[observer] complete!`),
};

보시다시피 옵저버에는 3개의 콜백이 있습니다. 하나는 Observable이 내보낼 수 있는 각 알림 유형에 대한 것입니다. 모든 콜백은 관찰 가능한 이벤트 알림을 기반으로 반응할 수 있습니다.
관찰자는 모든 알림에 반응하고 싶지 않기 때문에 세 개의 콜백을 모두 정의하지 않았을 수 있습니다. 이러한 경우 필요한 유일한 콜백으로 관찰자를 만들 수 있습니다.

import {
  NextObserver,
  ErrorObserver,
  CompletionObserver,
} from "rxjs";

const nextObserver: NextObserver<string> = {
  next: (value: string) =>
    console.log(`[nextObserver] next`, value),
};

const errorObserver: ErrorObserver<string> = {
  error: (error: Error) =>
    console.error(`[errorObserver] error`, error),
};

const completeObserver: CompletionObserver<string> = {
  complete: () =>
    console.log(`[completeObserver] complete!`),
};

next 속성 없이 NextObserver를 정의할 수 있지만 next 메서드의 본문만 표시합니다. 이 경우 관찰자는 기본적으로 NextObserver 유형입니다.

const defaultNextObserver: (value: string) => void = (value: string) =>
    console.log(`${new Date().toISOString()} - [defaultNextObserver] next`, value)

신청

구독은 Observable을 청취해야 하는 시점과 청취를 중단할 수 있는 시점을 결정하는 액터입니다.
코드에서 Observable이 구독되지 않을 때까지는 아무 일도 일어나지 않지만 구독을 생성하는 즉시 마법이 시작됩니다.
RxJS의 구독은 "구독"메소드를 사용하여 생성된 객체이며 하나의 기본 메소드가 있습니다: "구독 취소"; 이 방법을 사용하면 관찰 가능한 이벤트 수신을 중지할 수 있습니다.
코드에서 더 이상 구독이 필요하지 않을 때 "구독 취소"를 호출하는 것이 중요합니다. 이렇게 하면 메모리 누수로 인한 문제를 방지할 수 있습니다.
구독의 예

import { Subscription } from "rxjs";

const observer = (value: string) => console.log(`[unsubscribe method] next`, value)

const subscription: Subscription = observable.subscribe(observer);
subscription.unsubscribe();

RxJS 구독의 또 다른 멋진 기능은 "추가"메서드입니다. 이 방법을 사용하면 하나의 구독 인스턴스 내에서 더 많은 구독을 수집할 수 있으며 그 후에는 모든 구독을 한 번에 구독 취소할 수 있습니다.

import { Subscription } from "rxjs";

const subscription: Subscription = observable.subscribe((value: string) =>
  console.log(
    `[unsubscribe 1 method] next`,
    value
  )
);
subscription.add(
  observable.subscribe((value: string) =>
    console.log(
      `[unsubscribe 2 method] next`,
      value
    )
  )
);

subscription.unsubscribe();

어떤 경우에는 unsubscribe 메소드를 호출할 때 옵저버블에서 몇 가지 특별한 코드를 실행해야 합니다. RxJS는 옵저버블 선언 내부의 특수 구문을 사용하여 이 작업을 수행하도록 합니다. 옵저버블을 생성할 때 구독 취소 중에 라이브러리가 미래에 호출하는 함수를 반환할 수 있습니다. 다음은 문제와 솔루션을 더 잘 이해하기 위한 간단한 예입니다.

import {
  Observable,
  Subscriber,
  Subscription,
} from "rxjs";

const observableWithCallback = new Observable<string>(
  (subscriber: Subscriber<string>) => {
    let count = 0;
    const id = setInterval(() => {
      subscriber.next(`Count: ${++count}`);
    }, 300);

    return () => {
      console.log("On UnSubscription");
      clearInterval(id);
    };
  }
);

const subscriptionObservableWithCallback: Subscription = observableWithCallback.subscribe({
  next: (value: string) =>
    console.log(`[observableWithCallback] Next: ${value}`),
});
setTimeout(() => {
  subscriptionObservableWithCallback.unsubscribe();
}, 3000);

[observableWithCallback] Next: Count: 1
[observableWithCallback] Next: Count: 2
[observableWithCallback] Next: Count: 3
[observableWithCallback] Next: Count: 4
[observableWithCallback] Next: Count: 5
[observableWithCallback] Next: Count: 6
[observableWithCallback] Next: Count: 7
[observableWithCallback] Next: Count: 8
[observableWithCallback] Next: Count: 9
On UnSubscription

자, 오늘은 여기까지입니다.
다음 기사에서 우리는 RxJS의 마지막 기초인 Operator를 볼 것이고 이후에는 이 라이브러리의 기능을 보기 위해 이동할 수 있습니다.

이 기사here의 예를 찾을 수 있습니다.

곧 만나요 여러분!