포도가게의 개발일지

[RxJS] RxJS? 본문

[JS,TS,Node]

[RxJS] RxJS?

grape.store 2022. 3. 26. 21:25
반응형

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을 연결 구독한다.

'[JS,TS,Node]' 카테고리의 다른 글

Prototype chain  (0) 2024.09.22
TypeScript  (0) 2022.03.13
[Js] 고급 문법  (0) 2022.03.02
[Node] 작동 원리  (0) 2022.02.09
[Java Script]생성자 함수, Closure, generator  (0) 2022.02.08
Comments