RxJS는 반응형프로그래밍을 위한 자바스크립트 라이브러리로서 모든 이벤트(데이터)를 시간흐름위의 스트림(observable)로 추상화하여 처리한다.
document.addEventListener('click', () => console.log('Clicked!'))import {fromEvent} from 'rxjs'
const observable = fromEvent(document, 'click')
const observer = () => console.log('Clicked!')
observable.subscribe(observer)비연속적으로 발생하는 클릭이벤트를 스트림으로 간주하여 fromEvent함수는 클릭이벤트스트림을 추상화한 옵저버블객체를 반환한다.
( 옵저버블객체가 생성된다는 것은 비동기적으로 데이터를 방출할 수 있는 조건이 된것이다. )
옵저버블객체(소스스트림)이 준비되었다면 옵저버블에 의존하는 옵저버가 있어야 한다.
옵저버는 대단한 것이 아니고 나중에 옵저버블이 상태변화를 데이터로 방출했을때 반응할 핸들러(콜백함수)인 것이다.
옵버저블객체와 옵저버가 준비되면 2개를 연결해야 하는데 옵저버블패턴은 옵저버가 옵저버블객체에 의존하는 방식이기 때문에 옵저버블객체에 옵저버를 등록해야 한다.
옵저버블객체의 subscribe메소드는 옵저버를 등록하는 역활을 한다.
옵저버핸들러가 등록되면(구독되면) 옵저버블객체는 상태변화가 발생했을때마다 등록된 옵저버(핸들러)를 호출한다.
let count = 0
document.addEventListener('click', () => console.log(`Clicked ${++count} times`));이벤트핸들러는 외부변수 참조하여 순수성을 잃는다.
import {fromEvent} from 'rxjs'
import {scan} from 'rxjs/operators'
const observable = fromEvent(document, 'click').pipe(scan(count => count + 1, 0));
const observer = count => console.log(`Clicked ${count} times`);
observable.subscribe(observer)RxJS가 지원하는 operator를 사용하여 observer에 전달할 데이터를 가공함으로써 observable과 observer는 순수성을 유지할 수 있다.
데이터스트림(Observable)
데이터스트림에 있는 데이터가 동기식이면 동기로 처리하고 비동기식이면 비동기로 처리한다.
import {Observable} from 'rxjs'
const observable = new Observable(subscriber => {
subscriber.next(1)
subscriber.next(2)
subscriber.next(3)
setTimeout(() => {
subscriber.next(4)
subscriber.complete()
}, 1000)
})옵저버블객체를 생성할때는 소스스트림 역활을 하는 데이터를 전달해야 한다.
소스스트림으로 함수가 전달됬지만 스트림역활을 할 뿐이다.
RxJS는 대부분형태의 데이터를 옵저버블스트림으로 만들어주지만 위와 같은 형태의 함수도 소스데이터로 사용가능하다.
이 경우에는 함수가 옵저버의 next메소드를 호출하면서 방출할 데이터를 전달하는데 인위적으로 데이터를 방출하는 방식으로 잘 사용되지 않는다.
console.log('just before subscribe')
observable.subscribe({
next(x) {
console.log('got value ' + x)
},
error(err) {
console.error('something wrong occurred: ' + err)
},
complete() {
console.log('done')
},
})옵저버블개겍체의 subscribe메소드에 사용되는 것은 핸들러라고 했다.
핸들러의 형식은 지정되어 있으며 next, error, complete 3개의 메소드로 구성된 객체이거나 3개의 함수를 나열하면 된다.
observable.subscribe({next, error, complete})
observable.subscribe(next, error, complete)
옵저버블은 Promise와 달리 subscribe를 취소할 수 있는 기능을 제공한다.
import {interval} from 'rxjs'
const observable = interval(1000)
const subscription = observable.subscribe(x => console.log(x))
subscription.unsubscribe();observable를 구독하면 subscription객체가 반환되고 subscription객체를 이용해 해당 구독을 취소할 수 있다. subscription 은 구독을 취소하기 위한 용도로서만 사용된다.
