[RxJS / angular] 1. Observer와 Subscriber

본격적으로 rxjs에서 사용되는 용어에 대해 하나씩 정리해 보겠습니다.  RxjJS에서 Observer와 Subscriber는 무엇을 의미하는 걸까요? 개념부터 차근차근 정리해 보겠습니다. Observer와 Subscriber는 과연 무슨 관계일까요?

 

관련글

RxJS를 사용하는 이유

RxJS 란?

---

Observer 옵저버 란?

Observer의 예를 빵 공장에서 작업하는 장면을 떠올려 대입해 보도록 하겠습니다.  빵 공장의 작업자(옵저버)는 반죽이 컨베이어에서 배출되는 과정을 관찰을 하게 됩니다. 작업자가 잘 관찰할 수 있게 작업자는 램프로 알림을 받게 되고요. 램프에 불이 켜지면 반죽이 도착하고 작업자는 적절한 모양으로 반죽한 후 다시 흘려보냅니다. 그리고 불량이 있다면 반죽을 처분하게 되죠. 더 이상 반죽이 없어지면 작업자(옵저버)의 일과는 끝이 납니다.

이제 RxJS의 세계에서 옵저버를 생각해 보겠습니다. 이름처럼 옵저버는 데이터나 이벤트에 대한 지정된 알림을 관찰하고 응답하는 객체입니다. 옵저버 객체에는 아이템이 배출됐을 때 처리하는 next(), 에러를 처리하는 error(), 최종 처리 정리를 담당하는 complete() 메소드들이 지정되어있습니다.

RxJS의 문서에서는 Observer에 대한 정의를 관찰 가능한 값(Observable)에 대한 수신 대기(listen)하는 방법을 알고 있는 콜백 모음이라고 정의하고 있습니다. next(), complete(), error() 메서드를 next항목이 배출되거나, 오류가 발생하거나, 프로세스가 완료될 때 응답하는 콜백으로 생각할 수 있습니다. 또 문서에는 Observer가 Observable에 의해 전달되는 값의 소비자라고 명시되어 있습니다. 따라서 Observable은 알림 및 관련 값을 내보내는 역할을 하고, 옵서버는 이러한 알림에 대해 응답하고 해당 값을 사용하게 됩니다.

 

Subscriber(구독자) 란?

RxJS의 내부적으로 옵저버는 next, error, complete 메서드가 있는 인터페이스로 정의됩니다. 옵저버 인터페이스를 구현하는 클래스 중 하나가 Subscriber(구독자)입니다. 옵저버는 배출된 항목을 관찰하는데 사용하는 클래스이지만, RxJS 내부에서는 각 옵저버가 구독자로 변환됩니다. Subscriber는 기본적으로 Observable에서 구독을 취소할 수 있는 추가 기능을 가진 옵저버입니다.

Observer와 Subscriber의 관계

Observable과 Subscription(구독)에 대해서는 다음 포스트에서 다루게 됩니다. Sbuscriber는 RxJS를 외에서는 거의 사용되지 않습니다.

 

코드에서 살펴보기

옵저버가 코드에서 어떻게 생겼는지 살펴봅시다.

옵저버를 메서드로 지정된 세가지 유형의 알림을 처리하는 객체라고 말했습니다. observer라는 변수를 선언하고 세가지 메소드를 정의한 후 객체 리터럴에 할당하고 있습니다.  next()에는 항목이 스트림으로 배출될 때마다 실행할 메소드를 지정하고 error()는 에러가 발생할시 실행 할 메소드, complete()는 최종처리 또는 정리를 위한 메소드를 지정합니다. 위 예는 설명을 위해 만든 옵저버 객체로 단순히 알림을 콘솔에 출력하지만 이와 같은 옵저버를 선언하는 경우는 거의 없습니다.

---

여기까지 수고하셨습니다. Observer와 Subscriber의 개념에 대해 알아보았는데요. 이전에 RxJS을 조금이라도 접하셨다면 쉬운 내용이었고 처음 접하셨다면 알쏭달쏭한 부분도 있을 것 같습니다. 오늘 포스트에서 Observer가 Observable에 의해 전달되는 값을 소비하는 애라고 했었죠?  다음 포스트는 이 Observable에 대해 알아보도록 하겠습니다.