Subject를 Unsubscribe 하기 (How to Unsubscribe Subject)

Subject를 Subscribe를 할 때 Subscription으로 받아둔 뒤 해당 Subscription을 unsubscribe 하는 방법입니다.

예시

아래 코드에서는 onInit 일 때 mountSubject를 subscribe 하고, onDestroy 일 때 unsubscribe 하는 코드입니다. 생각보다 간단하므로 쉽게 적용할 수 있습니다.

import { OnInit, OnDestroy } from '@angular/core';
import { Subject, Subscription } from 'rxjs';

export class SubscribeClass implements OnInit, OnDestroy {
mountSubject: Subject;
mountSubscription: Subscription;

  constructor() {
    this.mountSubject = new Subject();
  }

  ngOnInit() {
    this.mountSubscription = this.mountSubject.subscribe();
  }

  ngOnDestroy() {
    this.mountSubscription.unsubscribe();
  }  
}

다중 처리

만일 여러 개의 Subscription이 같은 방식으로 동작한다면,
하나의 Subscription으로 여러 subscribe들을 모아 처리할 수 있습니다.
이 경우 add() 함수를 활용합니다.

export class SubscribeClass implements OnInit, OnDestroy {
mountSubject: Subject;
anotherMountSubject: Subject;
mountSubscription: Subscription = new Subscription();

  constructor() {
    this.mountSubject = new Subject();
    this.anotherMountSubject = new Subject();
  }

  ngOnInit() {
    this.mountSubscription.add(
      this.mountSubject.subscribe(),
      this.anotherMountSubject.subscribe()
    );
  }

  ngOnDestroy() {
    this.mountSubscription?.unsubscribe();
  }
}

각 Subject/Observable의 subscribe 내의 내용이 길어질 경우 함수로 빼서 처리하면, 깔끔하게 정리할 수 있습니다.

export class SubscribeClass implements OnInit, OnDestroy {
mountSubject: Subject;
anotherMountSubject: Subject;
mountSubscription: Subscription = new Subscription();

  constructor() {
    this.mountSubject = new Subject();
    this.anotherMountSubject = new Subject();
  }

  ngOnInit() {
    this.mountSubscription.add(
      this.mount(),
      this.anotherMount()
    );
  }

  mount = () => {
    return this.mountSubject.subscribe(() => {
      ...
    });
  }

  anotherMount = () => {
    return this.anotherMountSubject.subscribe(() => {
      ...
    });
  }

  ngOnDestroy() {
    this.mountSubscription?.unsubscribe();
  }
}