Observable 과 Observer

리액티브 프로그래밍은 필요한 데이터를 획득하기 위해서 애플리케이션이 외부 환경에 요청하여 데이터를 획득하는 것이 아니라, 애플리케이션은 외부 환경을 관찰하고 있다가 외부 환경에서 데이터 스트림을 방출하면 그것에 반응하여 데이터를 획득하는 것

옵저버블 은 데이터 스트림을 생성하고 방출하는 객체,
옵저버는 옵저버블이 방출한 데이터를 획득하여 사용하는 객체

즉, 데이터 소비자인 옵저버는 데이터 생산자 옵저버블을 구독(subscription)한다.

Angular 에서는 비동기 데이터 스트림을 처리하는 API 를 RxJS를 채택 하여 사용한다.

마우스 움직임에 반응하여 화면에 좌표를 표시하는 예제

import { Component, OnInit } from '@angular/core';

// ① RxJS 임포트
import { Observable, fromEvent } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <h3>Mouse Coordinates</h3>
    <h3>X: {{ posX }} Y: {{ posY }}</h3>
  `
})
export class AppComponent implements OnInit {
  mousePositon$ :Observable<Event>;
  posX: number = 0;
  posY: number = 0;

  ngOnInit() {
    // ② 옵저버블의 생성(DOM 이벤트를 옵저버블로 변환)
    // fromEvent 오퍼레이터는 DOM 이벤트를 옵저버블로 변환하는 오퍼레이터이다.
    // 데이터를 생산해내는 것이면 무엇이든 옵저버블로 만들 수있다.
    // 이로서 mousePosition$ 에 event가 담겼고
    this.mousePositon$ = fromEvent(document, 'mousemove');

    // ③ 옵저버는 옵저버블을 구독하고 옵저버블이 방출한 데이터를 전파받아 사용한다.
    // 옵저버블을 구독하면 데이터 스트림을 받을수 있다.
    // 여기 예제에서는 event에 담겼다.
    this.mousePositon$.subscribe(
      (event: MouseEvent) => {
        this.posX = event.clientX;
        this.posY = event.clientY;
      },
      error => console.log(error),
      () => console.log('complete!')
    );
  }
}