수정하기 - switchMap을 사용한 코드 예제를 보여주세요.

닉네임

비밀번호

제목

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

물론입니다! `switchMap`은 RxJS에서 자주 사용하는 연산자 중 하나로, 주로 Observable을 변환할 때 사용됩니다. `switchMap`의 주요 특징은 내부 Observable이 새로 만들어질 때마다 이전에 구독하던 Observable을 취소(해지)한다는 점입니다. 즉, 구독이 새로 바뀌면 이전 스트림은 자동으로 종료되어 최신 데이터만 받게 됩니다.    아래는 `switchMap`을 사용하는 간단하면서도 실용적인 예제를 TypeScript와 RxJS 코드로 설명하겠습니다.    ---           예제 상황    유저가 입력하는 텍스트를 서버에 검색 요청을 보내고 싶다고 가정합시다. 사용자가 타이핑을 멈추면 그 시점의 텍스트로 검색 API를 호출하여 결과를 받아 표시합니다. 만약 사용자가 빠르게 타이핑을 계속한다면, 이전에 날린 검색 요청은 무시하고 마지막 요청만 처리하고 싶습니다.    ---           코드 예제    ```typescript  import { fromEvent, of } from 'rxjs';  import { debounceTime, map, switchMap, catchError } from 'rxjs/operators';    // 가상의 검색 API 함수 (실제로는 HTTP 요청이겠지만, <a href='https://sangseek.com/sangseeks/여기선/ko'>여기선</a> 간단히 Promise 반환)  function fakeSearchApi(query: string): Promise<string[]> {    return new Promise((resolve) => {      setTimeout(() => {        resolve([`Result for "${query}" 1`, `Result for "${query}" 2`, `Result for "${query}" 3`]);      }, 1000); // 서버 응답 지연 1초    });  }    // input 엘리먼트를 가져온다 (HTML에 <input id="search-input" /> 있어야 함)  const input = document.getElementById('search-input') as HTMLInputElement;    if (input) {    fromEvent(input, 'input').pipe(      map(event => (event.target as HTMLInputElement).value.trim()), // 입력값 추출      debounceTime(300), // 300ms 동안 입력 없으면 이벤트 전달 (과도한 요청 방지)      switchMap(query => {        if (query === '') {          // 빈 문자열이면 빈 배열 반환          return of([]);        }        // 검색 API 호출 (Promise를 Observable로 변환)        return from(fakeSearchApi(query)).pipe(          catchError(err => {            console.error('검색 중 에러 발생:', err);            return of([]); // 에러 시 빈 배열 반환          })        );      })    ).subscribe(results => {      // 검색 결과 처리      console.log('검색 결과:', results);      // 여기서 화면에 결과 렌더링 가능    });  }  ```    ---           설명    1.   fromEvent(input, 'input')  : input 박스에 입력 이벤트를 Observable로 만듭니다.  2.   map  : 이벤트 객체에서 실제 입력한 텍스트 문자열을 뽑아냅니다.  3.   debounceTime(300)  : 사용자가 타이핑을 멈춘 후 300ms 동안 이벤트가 없으면 다음 단계로 넘깁니다.  4.   switchMap  : 새 검색어가 들어올 때마다 이전에 호출한 검색 API 요청을 취소하고 새로운 요청만 구독합니다.  5.   fakeSearchApi  : 실제 API 호출 역할을 하는 Promise 함수입니다.  6.   catchError  : API 호출 중 에러가 발생하면 빈 배열로 처리해 UI 중단을 막습니다.  7.   subscribe  : 결과를 받아 콘솔에 출력하거나 화면에 렌더링합니다.    ---           핵심 정리    - `switchMap`은 내부의 Observable이 바뀔 때 이전 Observable을 자동으로 취소해 주므로, 검색처럼 최신 요청 결과만 반영해야 하는 상황에 최적입니다.  - 빠르게 여러 이벤트가 발생해도 마지막 이벤트 처리만 수행하며, 중복된 네트워크 요청을 방지할 수 있습니다.    ---    필요하면 Angular HTTP와 함께 사용하는 예제도 추가 설명해 드릴 수 있습니다. 언제든 말씀해 주세요!