[Angular] Observable & Observer

 

 

Angular tutorial 프로젝트를 따라하면서 Observable를 사용했는데, Observable, Observer 두 단어로 설명하다보니 잘 이해가 되지 않았다. 두 용어에 대해 찾아보다가 PoeimaWeb에 아주 좋은 예시가 나와있어 정리해본다.

 

 

 

 

1. Observable ? Observer?

TV 방송국과 TV의 관계를 예로 들어보자. 

방송국에서는 영상 정보를 계속해서 방출(emit)해야하고, TV는 방송국에서 방출하는 영상 정보를 가져와야한다.

TV에서 방송국의 영상 정보를 가져오기 위해서는 방송국에 요청을 해야하는데, 이 과정을 구독(subscribe)라고 한다.

(이 방식은 Push-scenario라고 하며, Pull-scenario 방식은 글 하단 URL에서 확인할 수 있다.)

 

방금 전 설명을 그림으로 그려보면 위와 같다.

여기서 방송국은 Observable을 의미하고, TV는 Observer를 의미한다.

 

Observable

- 데이터 스트림을 생성하고 방출하는 객체

- notification : Observable이 방출한 이벤트 또는 값

 

Observer

- Observable이 방출한 norification을 획득하여 사용하는 객체.

 

 

 

 

 

 

 

2. 종류

(1) Cold Observable

- Observer가 구독(subscribe)하기 전까지, noti를 방출하지 않는 Observable.

- RxJS의 Observable은 기본적으로 Cold Observable이다.

- 구독(subscribe)되기 전까지는 데이터 스트림을 방출(emit)하지 않으며, Observer가 Cold Observable을 구독하면 처음부터 동작하기 시작한다. 따라서 Observer는 Observable이 방출(emit)하는 모든 데이터 스트림을 처음부터 빠짐없이 받을 수 있다.

- Observable을 구독하는 Observer는 하나 이상일 수 있다.

-> Cold Observable를 구독하는 모든 Observer들은 자신만을 위해 독립적으로 실행하는 Observable을 가질 수 있다.

-> 이를 Unicast 라고 한다.

 

 

(2) Hot Observable

- 구독(subscribe)과 상관 없이 바로 데이터 스트림을 방출(emit)한다.

- Observer들은 구독 시점부터 방출되는 데이터를 받는다.

- Observable를 구독하고 있는 모든 Observer들에게 부수 효과(side-effect)가 있다.

-> 이를 Multicast라고 한다.

 

 

 

 

 

3. 사용 예제

- 먼저 Observable을 사용하기 위해서는 rxjs에서 import 해야 한다.

- 그 다음 Observable이 구독(subscribe)될 때 호출되는 함수를 작성한다. 이 때, Observable을 처리하는 Observer 객체를 함께 전달한다.

 

- Observer는 Observable이 보내는 세 가지 알림을 처리하는 콜백 함수로 구성된다.

(1) next() : [필수] 데이터 스트림을 처리하는 핸들러. Observable 구독을 시작한 후 여러 번 실행된다.

(2) error() : 에러 스트림을 처리하는 핸들러. 에러 스트림으로 전달되면, 이후 Observable 로직이 실행되지 않는다.

(3) complete() : Observable 종료 스트림을 처리하는 핸들러. 

 

- Observable을 생성하기 위해서는 new 연산자를 이용해서 생성한다. 그리고 구독(subscribe)함수를 호출해서 Observable이 방출한 noti를 전파받아 처리한다.

 

 

 

위 예제를 실행해보면, 아래와 같은 결과가 나온다.

 

 

 

 

 

 

 

 

참고 : https://poiemaweb.com/angular-rxjs

Angular RxJS | PoiemaWeb