[Angular / Rxjs] subscribe, unsubscribe

펭도리·2022년 6월 6일
0

Angular

목록 보기
1/2
post-thumbnail

Rxjs에서 Observable과 asObservable를 이용하여 데이터를 주고 받고 변화한 값을 알아낸다.

subscribe란?

현재 사용하고 있는 변수의 값이 변화했는지? 변화했으면 어떻게 변화했는지를 알고 대응하고 싶을때 사용하는것이 subscribe이다.

다음 코드를 살펴보자.
rxjs에서 interval을 지원한다 이것은 setInterval과 동일하다.
interval이 1초에 한번씩 실행되는 로직이고 그것을 subscribe(구독)하여 값을 찍어볼 수 있게된다.

위와 같은 방법으로 subscribe는 다양하게 사용되는데 서버와 통신 시 서버로부터 값을 받아 변수에 값이 할당되었을 때 어떠한 다른 동작이 수행되게도 만들 수 있다.

예를 들어보자.

  • subject
    전역변수로 time이라는 변수를 만들어주었고 rxjs의 Subject를 이용하여 값을 보내주었다.

interval을 통해서 intervalTime은 0, 1, 2, ... 점점 증가하게 되고 그것을 Subject의 메서드인 next로 값을 전달하게 된다. 그럼 time의 값은 intervalTime과 동일한 값을 가지게 되고 그것을 subscribe 하여 현재 time의 값이 얼마인지 알아내는 방법이다.

쉽게 설명하기 위해 interval을 사용하였지만 다른 예를 들면 어떠한 100개의 리스트를 보여줘야 한다고 가정해보자. 이 100개의 리스트를 지울수도 또는 다른것이 추가될 수 도 있다. 현재 페이지에서 값이 변하게 된다면 자연스럽게 다른 페이지에서도 변화한 값을 알아야한다. 그럴때 Subject의 next와 subscribe를 통해 구독하고 있다면 값이 변화하였을 때 즉각적으로 여기에 의존성을 가진 값들은 모두 변하게 만들 수 있다.

unsubscribe란?

subscribe는 엄청나게 편리한 기능이다. 하지만 편리한 만큼 잘못관리하면 성능에 엄청난 영향을 미칠 수 있다. 이유는 간단하다. subscribe(구독)을 하게되는 순간 값이 변화하게 된다면 우리가 unsubscribe하거나 complete를 하지 않는다면 계속해서 관찰(동작)하게 되고 이는 곧 메모리 낭비 또는 의도치않은 값의 변화를 유발할 수 있다.


  • subscription
    subscription은 내가 구독하고있는 subscribe를 관리하기 위해 만들어준 변수라고 생각하면 쉽게 이해할 수 있다. interval은 subscription에 닮겨서 구독되어지고 있는 상황이고 그로 인해 time의 값은 계속해서 변하고 있다. 그러나 내가 화면을 클릭할 시 timeSubscription을 unsubscribe하게 되고 이후엔 time값이 변하지 않아 console이 찍히지 않는 모습을 볼 수 있다.
  • complete
    subscribe를 구독완료 즉 앞으로는 구독하지 않겠다. 내가 할 일은 완료되었다. 라는 뜻이다. complete를 하게되면 time을 다시 new Subject로 등록하지 않는 한 time이라는 Subject 변수는 더이상 사용할 수 없게 된다.

이 이외에 방법으로 pipe와 take, takeUntil, takeWhile 등등 여러가지 operator을 이용하여 특정한 상황에서 구독이 취소되거나 유지될 수 있도록 해줄 수 있다.

profile
풀스택 개발자가 되고싶은 코린이 이한글

0개의 댓글