수정하기 - switchMap을 사용한 debounce 예시는 무엇인가요?

닉네임

비밀번호

제목

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

switchMap을 사용한 debounce 예시는 주로 입력값이 빠르게 변경될 때 이전 요청을 취소하고 가장 최신의 입력값에 대한 처리만 수행하고자 할 때 사용됩니다. RxJS에서 switchMap과 debounceTime 연산자를 조합하면 사용자가 빠르게 타이핑할 때 불필요한 API 호출을 줄이고, 마지막 입력값에 대해서만 서버 요청을 보내는 효과를 낼 수 있습니다.    아래는 switchMap을 사용해 debounce 효과를 구현하는 예시를 자세히 설명한 것입니다.    1. 상황 설명    사용자가 검색어를 입력하는 input 필드가 있다고 가정합니다. 사용자가 타이핑할 때마다 서버에 검색어를 보내 결과를 받아 표시해야 하지만, 사용자가 빠른 속도로 타이핑할 경우 중간<a href='https://sangseek.com/sangseeks/중간 발생/ko'>중간 발생</a>하는 검색어 변화에 대해 요청을 보내면 서버에 부담이 되거나 많은 불필요한 요청이 발생합니다.    2. 문제점    - 타이핑할 때마다 모든 값에 대해 요청이 발생    - 이전 요청이 완료되지 않았는데도 새 요청이 계속 발생    - 네트워크 과부하 혹은 불필요한 응답 처리 발생 가능    3. 해결 방법 - debounceTime + switchMap    - debounceTime: 일정 시간(예: 300ms) 동안 입력이 없을 때만 이벤트 발생    - switchMap: 새로운 이벤트가 발생하면 이전 수행 중이던 내부 옵저버블을 취소하고 새 내부 옵저버블로 전환      4. 구현 예시 (TypeScript + RxJS)    ```typescript  import { fromEvent } from 'rxjs';  import { debounceTime, distinctUntilChanged, switchMap, map } from 'rxjs/operators';    // 가상의 API 호출 함수 (검색어를 받아서 Promise 또는 Observable 반환)  function searchAPI(query: string): Promise<string[]> {    // 실제 구현에서는 HTTP 호출을 하겠지만, 여긴 예시로 1초 후 결과 반환    return new Promise(resolve => {      setTimeout(() => {        resolve([query + ' 결과 1', query + ' 결과 2']);      }, 1000);    });  }    // 검색 input 엘리먼트 가져오기  const inputElement = document.getElementById('searchInput') as HTMLInputElement;    // input 이벤트 스트림 생성  const input$ = fromEvent(inputElement, 'input').pipe(    // 입력 이벤트에서 텍스트 값만 추출    map(event => (event.target as HTMLInputElement).value),    // 입력값이 변경된 경우에만 진행 (연속된 동일값 필터링)    distinctUntilChanged(),    // debounceTime 적용: 마지막 입력 후 300ms 경과해야 다음 처리    debounceTime(300),    // 입력된 검색어를 받아 API 호출 Observable로 switchMap 처리    switchMap(searchTerm => searchAPI(searchTerm))  );    // 구독하여 결과 사용  input$.subscribe(results => {    console.log('검색 결과:', results);    // 여기서 UI에 검색 결과를 렌더링하는 처리를 하면 됨  });  ```    5. 설명    - 사용자가 입력할 때마다 `input` 이벤트가 발생한다.    - `map`으로 입력값만 뽑아낸다.    - `distinctUntilChanged`로 연속된 같은 값은 무시한다.    - `debounceTime(300)`으로 300ms 동안 입력이 멈출 때까지 대기한다.    - 입력이 멈춘 후 마지막 값에 대해 `switchMap`이 발동되고, 기존에 진행 중이던 검색 API 호출은 취소된다.    - 결과가 오면 구독자에서 출력하고 UI 갱신 가능      즉, switchMap을 debounceTime과 함께 사용하면 불필요한 이전 요청을 취소하면서 마지막 입력값에 대한 요청만 남겨 처리할 수 있기 때문에 매우 효율적으로 검색창 등에서 활용할 수 있습니다.