switchMap

·2022년 10월 25일
0

RxJS

목록 보기
1/9

반환값이 high order observable타입일때 평탄화하기 위한 오퍼레이터

방출된 데이터가 구독되지않은 상태에서 새로운 데이터가 방출되면 이전 방출데이터는 구독이 취소되고 새로운 데이터가 구독처리된다.

    const obs$ = fromEvent(document.body, 'click').pipe(
      mergeMap((ev)=>interval(1000))
    );
    obs$.subscribe(console.log);

interval오퍼레이터가 옵저버블을 반환하므로 평탄화하는 오퍼레이터를 사용한다.

클릭이벤트가 발생하면 mergeMap이 수행되고 0부터 1초간격으로 정수값이 증가되는 새로운 옵저버블이 반환되며 obs$가 구독되면 증가되는 정수값이 출력된다.

이때 다시 클릭이벤트가 발생하면 이전 옵저버블 구독함수는 interval이 방출하는 값을 계속해서 출력한다.

그리고 새로운 mergeMap이 수행하고 구독되어 새롭게 0부터 시작하여 정수값이 출력된다.

2번 클릭이벤트에대한 mergeMap의 interval이 작동하고 각각 구독함수가 작동하여 값들이 출력된다.

switchmap오퍼레이터를 사용하면 이전 구독함수를 해지하고 데이터를 방출하므로 이전 데이터값은 출력이 중지되고 새로운 interval오퍼레이터에의한 값들이 출력된다.

0개의 댓글