RxJS Subscriptions(구독) 관리 모범 사례

RxJS subscription 관리를 위한 모범 사례를 배워봅시다.

원문입니다 : https://www.thisdot.co/blog/best-practices-for-managing-rxjs-subscriptions

Best Practices for Managing RxJS Subscriptions - This Dot Labs

RxJS를 사용할 때 Observable을 구독하는 것이 표준 관행입니다.

이를 통해 우리는 Subscription을 생성합니다.

이 Subscription 객체는 이러한 구독을 관리하는 데 도움이 되는 몇 가지 방법을 제공합니다.

이것은 매우 중요하며 간과해서는 안되는 것입니다!

Subscription 관리가 중요한 이유는 뭔가요?

생성한 subscription을 관리하고 정리하는 방법에 대해 생각하지 않으면 애플리케이션에 일련의 문제가 발생할 수 있습니다.
이것은 Observer Pattern이 구현되는 방식 때문입니다.

Observable이 새 값을 내보내면 Observers는 구독 중에 설정된 코드를 실행합니다. 예를 들어:

obs$.subscribe(data => doSomethingWithDataReceived(data));

이 subscription을 관리하지 않으면
obs$가 새 값을 내보낼 때마다 doSomethingWithDataReceived가 호출됩니다.

이 코드가 앱의 Home View에 설정되어 있다고 가정해 보겠습니다.

사용자가 Home View에 있을 때만 실행해야 합니다.

다른 뷰로 이동할 때 이 구독을 올바르게 관리하지 않으면

doSomethingWithDataReceived가 계속 호출되어

잠재적으로 예기치 않은 결과, 오류 또는 추적하기 어려운 버그가 발생할 수 있습니다.

Subscription 관리는 어떻게 하나요?

적절할 때 Observable을 complete하거나 unsubscribe 하는 것입니다.

즉, 적절할 때 정리해서 실행하면 안될 때 코드가 실행되는 것을 방지합니다.

Subscription을 어떻게 정리(Clean up)하나요?

subscription 관리가 RxJS 작업의 필수 부분이라는 것을 알았으니,
구독을 관리하는 데 사용할 수 있는 방법을 알아봅시다

수동으로 구독 해제(unsubscribing) - 뷰에 들어갈 때 / 나갈 때

한 가지 방법은 활성 구독이 더 이상 필요하지 않을 때 수동으로 구독을 취소하는 것입니다.
RxJS는 이를 수행하는 편리한 방법을 제공합니다.

Subscription의 .unsubscribe() 메서드 입니다.

구독 취소가 얼마나 쉬운지 알 수 있습니다.

let homeViewSubscription = null;

function onEnterView() {
  homeViewSubscription = obs$.subscribe(data => doSomethingWithDataReceived(data));
}

function onLeaveView() {
  homeViewSubscription.unsubscribe();
}

1. 구독을 저장할 변수를 만듭니다.
2. 뷰에 들어갈 때 구독을 변수에 저장합니다.
3. 뷰를 떠날 때 구독을 취소합니다.
   • 필요하지 않을 때 doSomethingWithDataReceived()가 실행되는 것을 방지하기 위해서 입니다

이 방법은 훌륭합니다.

하지만 RxJS로 작업할 때 두 개 이상의 subscription이 있을 수 있습니다.

각각에 대해 구독 취소를 호출하는 것은 지루할 수 있습니다.

내가 본 많은 코드베이스가 사용하는 솔루션은

활성 구독 배열을 저장하고 이 배열을 반복하며 필요할 때 각각 구독을 취소하는 것입니다.

위의 예를 수정하여 이 작업을 수행하는 방법을 살펴보겠습니다.

const homeViewSubscriptions = [];

function onEnterView() {
  homeViewSubscriptions.push(
      obs$.subscribe(data => doSomethingWithDataReceived(data)),
      anotherObs$.subscribe(user => updateUserData(user))
    );
}

function onLeaveView() {
  homeViewSubscriptions.forEach(subscription => subscription.unsubscribe());
}

1. 구독을 저장할 배열을 만듭니다.
2. 뷰애 들어갈 때 각 구독을 배열에 추가합니다.
3. 뷰를 떠날 때, 배열 내의 구독 객체 전체의 구독을 취소합니다.

연산자 사용하기(Using Operator) - 조건부

RxJS는 조건이 충족되면 구독을 자동으로 정리하는 몇 가지 연산자를 제공하므로,
구독을 추적하기 위해 변수를 설정하는 것에 대해 걱정할 필요가 없습니다.

이 중 몇 가지를 살펴보겠습니다!

first

fisrt 연산자는 방출된 첫 번째 값 또는 지정된 기준을 충족하는 첫 번째 값만 사용합니다.

그 후 옵저버블은 완료됩니다.

즉, 수동 구독 취소에 대해 걱정할 필요가 없습니다. 

function onEnterView() {
    obs$.pipe(first())
        .subscribe(data => doSomethingWithDataReceived(data))
}

 

obs$가 값을 내보내면 first()는 값을 doSomethingWithDataReceived에 전달한 다음 구독을 취소합니다!

take

take 연산자를 사용하면 구독을 취소하기 전에 Observable에서 수신하려는 값의 수를 지정할 수 있습니다.
즉, 지정된 갯수의 값을 받으면 take가 자동으로 구독을 취소합니다.

function onEnterView() {
    obs$.pipe(take(5))
        .subscribe(data => doSomethingWithDataReceived(data))
}

obs$가 5개의 값을 내보내면 take가 자동으로 구독을 취소합니다.

takeUntil

takeUntil 연산자는
다른 notifier Observable이 새 값을 방출할 때까지 Observable에서 값을 계속 수신할 수 있는 옵션을 제공합니다.

예제를 봅시다.

const notifier$ = new Subject();

function onEnterView() {
      obs$.pipe(takeUntil(notifier$)).subscribe(data => doSomethingWithDataReceived(data))
}

function onLeaveView() {
  notifier$.next();
  notifier$.complete();
}

1. Subject를 사용하여 notifier$ Observable을 만듭니다. (여기(Creating Observables here)에서 Observable 생성에 대해 자세히 알아볼 수 있습니다.)
2. 우리는 notifier$가 값을 방출할 때까지 값을 받기를 원한다는 것을 나타내기 위해 takeUntil을 사용합니다.
3. 우리는 notifier$에게 값을 내보내도록 지시하고 뷰를 떠날 때 _(notifer$를 스스로 정리해야 함) 완료하여 원래 구독을 구독 취소할 수 있도록 합니다.

takeWhile

또 다른 옵션은 takeWhile 연산자입니다.
지정된 조건이 true로 유지되는 동안 계속 값을 받을 수 있습니다.
false가 되면 자동으로 구독 취소됩니다.

function onEnterView() {
      obs$
        .pipe(takeWhile(data => data.finished === false))
        .subscribe(data => doSomethingWithDataReceived(data))
}

위의 예에서 우리는 방출된 데이터에 대해 종료된 속성이 false인 동안 계속 값을 수신할 것임을 알 수 있습니다.
true로 바뀌면 takeWhile이 구독을 취소합니다!

언제 해당 벙법중 하나를 사용해야 할까요?

이 질문에 대한 간단한 대답은 다음과 같습니다.

Observable이 새로운 값을 방출할 때 더 이상 코드를 실행하고 싶지 않을 때

사용 사례 별은 다음과 같습니다.

• SPA에서 뷰에서 뷰로 이동할 때입니다.
• Angular / Vue에서는 컴포넌트를 distroy할 때 사용합니다.
• 상태 관리와 결합하여 앱의 생명 주기 동안 변경되지 않을 것으로 예상되는 상태 조각을 한 번만 구독할 때 사용할 수 있습니다.
• 조건이 충족될 때 수행합니다. 이 조건은 사용자가 처음 클릭하는 것부터 일정 시간이 경과한 때 등 다양할 수 있습니다.

RxJS 및 Subscription으로 작업할 때
반드시 Observable에서 더 이상 값을 받고 싶지 않을 때를 생각하고
반드시 이를 위한 코드를 구현하세요!