[RxJS] RxJS?

RxJS?

- 이벤트 기반 프로그래밍에서 함수형 프로그래밍을 이용해 보다 선언적으로 이벤트를 처리할 수 있도록 도와준다?

- RxJS는 모든 이벤트를 observable로 추상화하여 시간에 따른 스트림으로 간주할 수 있게 된다. 그리고 각 이벤트가 observer(이벤트 핸들러)에게 전달되기 전에 map, filter 등의 operator를 이용해 이벤트를 필요한 형태로 재가공하여 observer에게 전달할 수 있다.

 

일반적인 이벤트 처리 방식

document.addEventListener('click', () => console.log('Clicked'));

RxJS 방식

import { fromEvent} from 'rxjs'

//fromEvent를 이용하여 observable 객체로 만든다.
const observable = fromEvent(document, 'click');

// observer(이벤트핸들러) 정의
const observer = () => console.log('Clicked!');

// observer가 observable을 구독한다.
observable.subscribe(observer);

 

RxJS를 이용하여 이벤트를 다룰 때는 항상 아래와 같은 절차를 거치게 된다.

1. observable 정의

• 어떤 이벤트들을 하나의 observable로 묶을 것인가.?
• 적적한 operator를 이용하여 observable을 가공

2. observer 정의

• observable로 부터 이벤트를 전달받으면 어떻게 처리할지 정의

3. observable와 observer 연결

• observe와 observable을 연결 구독한다.