수정하기 - switchMap의 기본 사용법은 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

switchMap은 RxJS 라이브러리에서 사용하는 연산자 중 하나로, 주로 Observable을 다룰 때 사용됩니다. 기본적으로 어떤 Observable에서 방출한 값을 받아 또 다른 Observable로 전환(switch)하여 결과를 방출하게 해줍니다.    switchMap의 기본 사용법을 설명하면 다음과 같습니다:    1.   역할         switchMap은 소스 Observable이 방출하는 각각의 값을 받아, 그 값에 기반한 새로운 내부 Observable을 생성합니다. 그리고 이전에 생성된 내부 Observable이 아직 완료되지 않았어도, 새로 생성된 Observable을 구독(subscribe)하면서 이전 Observable의 구독을 취소(unsubscribe)합니다. 즉, 항상 가장 최근에 생성된 내부 Observable만 활성화됩니다.    2.   기본 문법         ```typescript     sourceObservable.pipe(       switchMap(value => innerObservable)     )     ```     여기서 `sourceObservable`은 원본 Observable이고, `value`는 원본 Observable이 방출하는 각 값입니다. `switchMap`의 콜백 함수는 이 값을 받아, 새로운 Observable(`innerObservable`)를 반환해야 합니다.    3.   동작 흐름         - 소스 Observable에서 값을 방출한다.       - 콜백 함수가 호출되어 새로운 내부 Observable을 반환한다.       - 이전에 구독 중이던 내부 Observable이 있으면 즉시 구독을 취소한다.       - 새로 반환된 내부 Observable을 구독한다.       - 내부 Observable이 방출하는 값을 외부로 다시 방출한다.    4.   실제 예제         예를 들어 사용자가 검색어를 입력하는 Observable이 있고, 입력된 검색어로 API 호출 Observable을 만들어 결과를 받아야 한다고 가정할 때, 다음과 같이 사용할 수 있습니다.       ```typescript     import { fromEvent } from 'rxjs';     import { debounceTime, switchMap, map } from 'rxjs/operators';     import { ajax } from 'rxjs/ajax';       const searchInput = document.getElementById('search');       const search$ = fromEvent(searchInput, 'input').pipe(       map(event => event.target.value),       debounceTime(300), // 키 입력 중간중간 잠시 멈출 때까지 대기       switchMap(searchTerm =>          ajax.getJSON(`https://api.example.com/search?q=${searchTerm}`)       )     );       search$.subscribe(results => {       console.log(results);     });     ```       이 코드에서는 사용자가 입력할 때마다 API에 요청을 하게 되는데, 만약 사용자가 빠르게 여러 글자를 입력하면 이전 API 요청은 자동으로 취소되고 마지막 입력에 대한 요청 결과만 받게 됩니다. 이것이 switchMap이 제공하는 주된 이점입니다.    5.   정리         - switchMap은 각 값을 다른 Observable로 매핑하되, 이전에 생성된 Observable 구독을 자동으로 취소한다.       - 빠르게 변하는 값에 대한 최신 이벤트만 처리하고 싶을 때 유용하다.       - 내부 Observable의 결과를 외부 Observable로 방출한다.      요약하면, switchMap의 기본 사용법은 원본 Observable에서 방출하는 값을 받아 새로운 Observable을 생성하고 그 결과를 방출하며, 이전 내부 Observable의 구독은 취소하는 패턴으로 활용하는 것입니다.