수정하기 - switchMap을 이용한 API 응답 처리 예시는 무엇인가요?

닉네임

비밀번호

제목

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

switchMap은 RxJS에서 많이 사용되는 연산자 중 하나로, 주로 비동기 작업을 처리할 때 사용합니다. 특히, API 요청과 같은 비동기 스트림에서 이전 요청을 취소하고 최신 요청만 처리하고자 할 때 유용합니다.    switchMap을 이용한 API 응답 처리 예시는 다음과 같습니다.    예를 들어, 사용자가 검색어를 입력할 때마다 해당 검색어에 대한 API 요청을 보내고, 가장 최근에 입력된 검색어에 대한 결과만 받아서 처리하고 싶다고 가정해 봅시다. 이때 switchMap을 사용하면 이전에 보낸 API 요청이 완료되지 않았더라도 취소하고, 최신 요청만 처리할 수 있습니다.    ```typescript  import { fromEvent } from 'rxjs';  import { debounceTime, map, switchMap } from 'rxjs/operators';  import { ajax } from 'rxjs/ajax';    // input <a href='https://sangseek.com/sangseeks/요소 선택/ko'>요소 선택</a>  const searchBox = document.getElementById('search');    // input 이벤트를 기반으로 스트림 생성  const search$ = fromEvent(searchBox, 'input').pipe(    // 사용자가 입력을 멈출 때까지 300ms 대기    debounceTime(300),    // 이벤트 객체에서 입력값 추출    map((event: Event) => (event.target as HTMLInputElement).value),    // 입력값을 API 요청 스트림으로 변환, 이전 요청은 취소    switchMap(searchTerm =>       ajax.getJSON(`https://api.example.com/search?q=${searchTerm}`)    )  );    // 구독하여 결과 출력  search$.subscribe(    results => {      console.log('API 응답 결과:', results);      // 여기에 UI 업데이트 코드 작성 가능    },    error => {      console.error('API 요청 중 에러 발생:', error);    }  );  ```    이 코드의 핵심은 다음과 같습니다:    1.   fromEvent  를 통해 input 요소의 키 입력 이벤트 스트림을 만듭니다.  2.   debounceTime(300)  으로 사용자가 입력을 멈출 때까지 대기하여 불필요한 요청을 줄입니다.  3.   map   연산자로 이벤트 객체에서 텍스트 입력값만 뽑아냅니다.  4.   switchMap  을 써서 입력값을 기반으로 API 요청 스트림으로 변환합니다. 만약 사용자가 입력을 빠르게 여러번 한다면, 이전 요청은 자동으로 취소되고 최신 입력에 대한 요청만 남아 응답을 받습니다.  5. 최종적으로 subscribe에서 API 응답 결과를 받아서 처리하거나 오류를 관리합니다.    이와 같이 switchMap을 이용하면 특히 검색, 필터링, 자동완성 같은 실시간 사용자 입력에 기반한 API 호출에서 매우 효과적으로 비동기 흐름을 관리할 수 있습니다. 이전 요청에 대한 응답이 나중에 도착하더라도 무시하고 최신 요청에 대한 응답만 처리하므로 UI가 깜빡이거나 불필요한 데이터 처리 문제를 방지할 수 있습니다.