수정하기 - switchMap으로 처리한 데이터의 변환 예시는 무엇인가요?

닉네임

비밀번호

제목

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

switchMap 연산자는 RxJS에서 주로 사용되며, 내부적으로 한 옵저버블이 방출한 값을 기반으로 또 다른 옵저버블을 생성하고, 이전에 생성된 옵저버블 구독을 취소하며 새로운 옵저버블의 값을 방출하는 역할을 합니다. 따라서 switchMap을 사용하면 데이터 스트림을 변환하거나 비동기 호출 결과를 연쇄적으로 처리할 때 매우 유용합니다.    switchMap으로 처리한 데이터의 변환 예시를 자세히 설명해보겠습니다.    예를 들어, 사용자가 입력한 검색어를 받아서 서버에서 검색 결과를 가져오는 상황을 가정해봅니다. 사용자가 입력할 때마다 그 입력값을 기반으로 서버 API를 호출하고, 이전에 호출된 API 응답은 무시하고 최신 호출 결과만 화면에 반영하고자 합니다.    1. 입력값 스트림을 받는다.  2. 입력값을 서버 API 호출 함수에 매핑한다.  3. 서버 API 호출 결과를 다시 스트림으로 받고 처리한다.    ```typescript  import { fromEvent } from 'rxjs';  import { debounceTime, map, switchMap } from 'rxjs/operators';  import { ajax } from 'rxjs/ajax';    const searchInput = document.getElementById('searchBox');    const search$ = fromEvent(searchInput, 'input').pipe(    // 입력 지연 시간을 300ms로 설정해 잦은 호출 방지    debounceTime(300),    // 이벤트 객체에서 값을 추출    map(event => event.target.value),    // 검색어를 매개변수로 하는 API 호출 옵저버블로 변환    switchMap(searchTerm =>      ajax.getJSON(`https://api.example.com/search?q=${searchTerm}`)    )  );    search$.subscribe(results => {    console.log('검색 결과:', results);    // 이 결과를 화면에 렌더링하는 로직 작성  });  ```    위 예시에서 switchMap은 사용자가 입력한 검색어를 기반으로 서버 호출 Observable로 변환합니다. 만약 사용자가 빠르게 여러 번 입력하면 이전에 발생한 API 호출 결과는 무시되고, 가장 최근 입력에 대해 발생한 요청만 처리합니다. 이는 switchMap이 이전 내부 Observable을 취소(cancellation)하고 새로운 내부 Observable로 전환하기 때문입니다.    즉, switchMap 안에서의 데이터 변환은, 입력값(string) → API 호출 Observable → API 응답(JSON 데이터) 흐름으로 이루어집니다. 이를 통해 데이터를 비동기적으로 변환하고 업데이트할 수 있는 구조를 만들 수 있습니다.    요약하자면, switchMap으로 처리한 데이터 변환 예시는:    - 외부 입력값이나 이벤트를 받아서  - 내부에 새로운 Observable(예시에서는 API 호출)을 동적으로 생성하고 전환하며  - 최신 Observable의 결과 데이터를 최종 스트림으로 방출하는 것    이렇게 데이터를 변환하고 연쇄 처리하는 데 있어 매우 강력한 도구입니다.