switchMap은 RxJS의 고차 연산자(operator)로, 소스 Observable에서 값을 받아 각 값마다 새로운(inner) Observable을 만들어 구독(subscribe)하고, 항상 “가장 최근에 만들어진” inner Observable의 값만 외부로 방출하는 동작을 합니다. 새 소스 값이 들어오면 이전에 구독 중이던 inner Observable을 즉시 취소(unsubscribe)하고(따라서 그 결과는 더 이상 방출되지 않음) 새 inner Observable을 구독합니다. 이로써 오래된(또는 “stale”) 비동기 작업을 자동으로 취소할 수 있습니다. 핵심 포인트 - 소스 값 → project 함수 → inner Observable 생성. - 항상 최신 inner Observable의 값만 방출; 이전 inner는 바로 취소됨. - 주로 “마지막 요청만 처리”해야 할 때(예: 자동완성, 검색어 변경 시 이전 HTTP 요청 취소)에 사용. 간단한 예 (자동완성/검색 요청) - fromEvent로 입력 이벤트를 받아 debounce, distinctUntilChanged 등을 적용한 뒤 switchMap으로 HTTP 요청을 만들어 최신 요청 결과만 받음. 예시 코드(개념적): fromEvent(input, 'input').pipe( map(e => e.target.value), filter(term => term.length > 1), debounceTime(300), distinctUntilChanged(), switchMap(term => http.get(`/api/search?q=${term}`)) ).subscribe(results => { /* 최신 결과 처리 */ }); 동작 예시(타이머로 시연) - 소스가 빠르게 1,2,3을 내보내고 각 inner가 1초 뒤 결과를 내는 경우, switchMap은 1에 대한 inner를 취소하고, 2도 취소하고, 최종적으로 3의 결과만 방출. switchMap vs 다른 고차 연산자(요약) - mergeMap: 모든 inner Observable을 병렬로 구독하고 모든 결과를 방출(동시 실행 허용). - concatMap: inner들을 순차 큐에 넣어 이전이 완료될 때까지 대기(순차 실행). - exhaustMap: inner가 실행 중이면 새 소스값을 무시(현재 작업이 끝날 때까지 새 요청 무시). - switchMap: 새 값이 오면 이전 inner를 취소하고 최신 것만 실행. 주의사항 및 팁 - 내부에서 발생한 에러는 기본적으로 외부 Observable을 에러 종료시킬 수 있으므로, inner Observable 내부에서 catchError로 처리해주어야 필요한 경우 스트림을 계속 유지할 수 있음. - HTTP 같은 경우 debounceTime + distinctUntilChanged와 함께 쓰면 불필요한 요청이 줄어듦. - resultSelector는 과거에 있었지만 현재 RxJS 버전에서는 잘 사용되지 않음; 대신 map 등으로 후처리. - 중첩 구독을 피하고 switchMap을 이용해 선언형(reactive)으로 처리하는 것이 권장됨. 요약 - switchMap은 각 입력을 inner Observable로 변환하고, 새로운 입력이 올 때 이전 inner를 취소하여 항상 최신 inner의 값만 방출하는 연산자입니다. 자동완성/검색 등 “마지막 것만 유효”한 상황에서 매우 유용합니다.
