switchMap mergeMap RxJS

switchMap 상세 분석

switchMap은 RxJS에서 제공하는 연산자 중 하나로, 이전의 Observable을 새로운 Observable로 교체하면서 이전 구독에 속한 동작을 취소하는 기능을 수행합니다. 이렇게 함으로써 여러 이벤트가 발생해도 새로운 이벤트에 대한 처리를 집중하여 관리할 수 있습니다.

주로 사용되는 상황과 활용 방안

switchMap은 주로 다음과 같은 상황에서 사용됩니다:

1. 검색 필터: 사용자가 검색을 입력할 때마다 이전 검색어에 대한 요청을 취소하고 새로운 검색어에 대한 요청 결과를 불러와야 할 때 사용합니다.

2. 타이머 카운트다운: 작업이 수행될 때마다 이전 타이머가 있다면 취소해야 하고, 새로운 타이머 카운트다운을 시작해야 하는 경우에 활용할 수 있습니다.

3. 자동 완성: 사용자가 글자를 입력할 때마다 이전 자동 완성 요청을 취소하고 새로 입력된 글자에 기반한 자동 완성 목록을 불러오고 싶은 경우에 사용할 수 있습니다.

장단점

장점:
1. 새로운 이벤트에 대한 처리가 우선시 되므로 자원을 효율적으로 관리할 수 있습니다.
2. 이전 구독이 취소되므로 불필요한 작업이 수행되지 않아 프로그램의 성능에 도움을 줍니다.

단점:
1. 중간에 취소된 작업 결과가 필요한 경우(예: API 요청)에 불리하게 작용할 수 있습니다. 이 경우 이전 이벤트에 대한 응답이 중요하다면 switchMap 사용이 적절하지 않을 수 있습니다.

비교 대상: mergeMap

switchMap과 비교할 수 있는 연산자로 mergeMap이 있습니다. mergeMap은 소스 Observable의 각 값을 프로젝트한 Observable을 병합하여 결과 Observable로 만듭니다.

import { of, interval } from 'rxjs';
import { mergeMap, switchMap } from 'rxjs/operators';

const obs1$ = interval(500).pipe(map(x => `obs1: ${x}`));

obs1$
  .pipe(mergeMap(() => interval(300).pipe(map(x => `obs2: ${x}`))))
  .subscribe(console.log);

obs1$
  .pipe(switchMap(() => interval(300).pipe(map(x => `obs2: ${x}`))))
  .subscribe(console.log);

예시에서 mergeMap과 switchMap의 차이가 분명하게 드러납니다. mergeMap을 사용하면 첫 번째 Observable이 방출하는 것을 중단하지 않고 두 번째 Observable과 병합하여 결과를 출력합니다. 반면에 switchMap을 사용하면 첫 번째 Observable이 이전 동작을 취소하고 새로운 동작을 시작합니다.

따라서 새로운 동작에 대한 처리를 집중하고자 할 때 switchMap을 사용하며 중단하지 않고 동작을 유지하면서 결과를 출력하고 싶을 때 mergeMap을 사용합니다.