많은 개발자가 예제 코드에서 문제점을 발견하지 못할 수도 있습니다. 이 코드의 문제는 이벤트 구독을 취소하려면 이벤트 핸들러(인라인된 람다식)로 전달된 함수에 대한 참조가 필요하다는 점입니다. 관용구를 최대한 많이 사용하려고 하다 보니 구독을 취소할 수 없는 핸들러를 만들게 됩니다(이때 이미 구독을 취소했더라도). 설상가상으로 이벤트 핸들러가 중첩되거나 해당 이벤트 내에서 다른 이벤트를 구독하면 메모리 누수가 더 많이 발생하는 또 다른 차원의 복잡성과 잠재적인 문제가 발생합니다.

이전 웹 애플리케이션(웹 1.0 시대)의 경우, 페이지 간 탐색은 페이지 리로드를 강제하여 자바스크립트 런타임 풋프린트¹가 삭제되므로 메모리 할당 해제는 큰 문제가 되지 않았습니다.

오늘날 싱글 페이지 애플리케이션(웹 2.0 시대)이 인기를 얻고 클라이언트가 더욱 현대적이고 풍부해짐에 따라 메모리 부족은 실제적인 위협이 되었습니다. 객체는 이제 브라우저에 로드된 애플리케이션의 전체 수명 주기 동안 존재할 수 있습니다.

이 모든 것이 걱정스러운 것만은 아닙니다. 가비지 컬렉터는 계속해서 개선될 것이고(자바스크립트가 시작된 이후로 그랬던 것처럼) 많은 애플리케이션이 문제없이 실행될 겁니다. 하지만 적절한 메모리 관리는 애플리케이션에서 여전히 중요한 부분입니다.

그래서 RxJS와 같은 정교한 라이브러리가 필요합니다. RxJS에서 생산자는 구독 취소를 담당합니다. 구독 관리는 subscribe() 호출에서 반환된 Subscription 타입 객체를 통해 처리됩니다. 이 객체에 소스 스트림을 해제하는 메커니즘을 구현합니다. 옵저버블 사용을 끝내고 이벤트를 더는 수신하지 않으려면 unsubscribe()를 호출하여 해당 이벤트를 해제하면 됩니다. 이를 명시적 취소(explicit cancellation)라고 합니다. 간단한 예제에서 살펴보겠습니다.

  const mouseClicks = Rx.Observable.fromEvent(document, 'mouseup');
const subscription = mouseClicks.subscribe(someMouseClickObserver);
 
subscription.unsubscribe(); -- 스트림을 분해하고 할당된 객체를 해제합니다.