RxJS 개념정리 - 반응형 프로그래밍,Observable,Subject,Scheduler

[RxJS] 개념정리

1. RxJS란 무엇인가

RxJS는 ReactiveX의 Javascript를 위한 라이브러리이다.

ReactiveX는 Observer 패턴, Iterator 패턴, 함수형 프로그래밍을 조합하여 제공한다.

ReactiveX는 이벤트를 observable로 추상화하여 시간에 따른 스트림으로 간주할 수 있게 한다.

observable이 observer에게 전달되기 전, operator를 이용해 재가공이 가능하다.

RxJS를 사용해 비동기 코드를 직관적이고 가독성 좋게 작성할 수 있다.

2. 반응형 프로그래밍(Reactive Programming)

반응형 프로그래밍은 이벤트나 배열과 같은 데이터 스트림을 비동기로 처리해 변화에 유연하게 반응하는 프로그래밍 패러다임이다.

반응형 프로그래밍은 외부에서 명령하지 않고, 응답이 오면 그때그때 반응하여 처리하는 Push 시나리오를 채택하고 있으며, 데이터를 가져오기 위해서는 subscribe해야한다.

Vanilar JS에서 이벤트를 처리하는 방식인 addEventListener가 이와 같은 방식이다.

targetElement가 이벤트를 subscribe하고 이벤트가 발생하면 event function이 작동한다.

여기서 Observer 패턴을 볼 수 있다.

Observer pattern은 객체의 상태 변화를 관찰하는 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다.

addEventListener로 이벤트를 구독하는 옵저버를 등록하고 이벤트 발생 시 event function을 호출하여 옵저버에게 알리는 방식이다.

하지만, 이 event function이 외부 변수를 참조하고 있다면 순수성을 잃고 side-effect가 발생할 수도 있다.

이를 RxJs로 처리하면 다음과 같이 순수함수로 작성할 수 있다.

import {fromEvent} from 'rxjs';
import {scan} from 'rxjs/operators';

fromEvent(document, 'click')
 .pipe(scan(count => count + 1, 0))
 .subscribe(console.log(`${count}번 클릭!`));

3. Observable

Observable은 시간의 흐름에 따라 발생하는 이벤트들의 스트림이라고 볼 수 있다.

pipeline을 설치하여 여러 이벤트나 데이터를 Observer에게 보낸다.

스트림은 관념적으로 뒤에 $를 붙인다.

Observable.create()나 new Observable()로 생성할 수 있다.

생성 연산자를 사용한 Observable 생성은 추후 정리하겠다.

Observable의 subscribe()를 통해 Observer 객체를 생성하고 만들어진 Observer 객체로

함수를 호출해 값을 발행한다.

Observable을 subscribe하고 반환받은 객체로 구독을 해제할 수 있다.

const subscription = observable.subscribe(x => console.log(x));
subscription.unsubscribe();

Observable의 unsubscribe()로 구독을 해제하면 Observable을 실행하지 않고 멈춘다.

Observer는 next, error, complete 3가지 함수로 구성된 객체이다.

next : Observable subscriber에게 데이터를 전달한다
complete : Observable subscriber에게 완료를 알리면 next가 데이터 전달을 멈춘다.
error : Observable subscriber에게 에러를 전달하면 next, complete가 발생하지 않는다.

Observable은 생성, 구독, 실행, 구독해제의 Life-Cycle을 가진다.

생성 : Observable.create()
구독 : Observable.subscribe()
실행 : observer.next()
구독해제 : observer.complete() / Observable.unsubscribe()

4. Subject

Subject는 멀티캐스팅을 지원하는 객체이다.

일반적으로 하나의 Observable에 하나의 Observer를 등록하지만,

Subject는 여러 Observer를 생성하고 데이터를 전달받을 수 있다.

Subject는 Observable이면서 Observer이기도 하다.

따라서 여러 Observable을 구독할 수 있고 next,error,complete 함수를 호출할 수 있다.

const subject = new Subject();
subject.subscribe({
    next: (x) => console.log(`observer A : ${x}`)
});
subject.subscribe({
    next: (x) => console.log(`observer B : ${x}`)
});
subject.next(1);
subject.next(2);

/*
observer A : 1
observer B : 1

observer A : 2
observer B : 2
*/

5. Scheduler

Javascript는 싱글 스레드, 이벤트 루프로 동작하지만 RxJs의 Scheduler를 사용하여

이벤트 루프에 스케쥴링이 가능하다

asyncScheduler : setTimeout과 비슷
asapScheduler : 다음 이벤트 루프 실행
queueScheduler : 스케쥴러에 전달된 state를 처리

참고 자료

Archive

RxJS 개념정리 - 반응형 프로그래밍,Observable,Subject,Scheduler