수정하기 - switchMap과 fromEvent의 조합은 어떻게 사용하나요?

닉네임

비밀번호

제목

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

switchMap과 fromEvent를 조합하는 방법에 대해 설명드리겠습니다. 이 두 연산자는 RxJS(리액티브 익스텐션 for <a href='https://sangseek.com/sangseeks/자바/ko'>자바</a>스크립트)에서 많이 사용하는 연산자입니다.    먼저 각각의 역할을 간단히 살펴보면,    -   fromEvent  : DOM 이벤트나 기타 이벤트 소스를 Observable 스트림으로 변환합니다. 예를 들어, 버튼 클릭, 키보드 입력, 마우스 움직임 같은 이벤트를 Observable로 만들어줍니다.  -   switchMap  : Observable에서 방출된 값마다 내부 Observable을 생성하고 구독하는데, 새로운 값이 들어오면 이전 내부 Observable의 구독을 취소하고 새로 만든 Observable만 구독합니다. 즉, 최신 값에 대해서만 반응하도록 만듭니다.    ---           switchMap과 fromEvent를 조합하는 일반적인 예    예를 들어, 사용자가 텍스트 입력(input box)에 타이핑할 때마다 서버에 검색어를 보내 검색 결과를 가져오는 상황을 가정해보겠습니다.    1. 사용자의 입력 이벤트를 `fromEvent`로 감지해서 Observable로 만듭니다.  2. 입력된 이벤트 객체에서 텍스트값을 추출합니다.  3. 해당 텍스트값을 가지고 서버 요청 Observable을 만들어 `switchMap`으로 처리합니다.  4. <a href='https://sangseek.com/sangseeks/새로운 검색/ko'>새로운 검색</a>어가 입력되면 이전 요청은 취소하고 가장 최신 요청에 대해서만 결과를 기다립니다.    이러한 동작은 불필요한 네트워크 요청을 막고, 항상 최신 상태를 반영하는 데 유용합니다.    ---           코드 예시    ```typescript  import { fromEvent, of } from 'rxjs';  import { debounceTime, map, switchMap, catchError } from 'rxjs/operators';    // 예를 들어 input 요소가 있다고 가정  const inputElement = document.getElementById('searchInput') as HTMLInputElement;    // fromEvent로 keyup 이벤트를 Observable로 변환  const input$ = fromEvent(inputElement, 'keyup');    input$.pipe(    // 이벤트가 너무 빈번하게 발생하지 않도록 300ms 딜레이 (optional)    debounceTime(300),      // 이벤트 객체에서 입력된 텍스트 값을 추출    map(event => (event.target as HTMLInputElement).value),      // switchMap으로 입력값마다 새로운 검색 요청 Observable 생성    switchMap(searchTerm => {      if (searchTerm.trim() === '') {        // 빈 문자열이면 빈 결과 반환        return of([]);      }      // 여기서 검색어를 사용해 서버에 요청 예시 (가정)      return fetchSearchResults(searchTerm).pipe(        catchError(err => {          console.error(err);          return of([]); // 에러 발생 시 빈 배열 반환하여 계속 스트림 유지        })      );    })  ).subscribe(results => {    // 검색 결과 처리 및 UI 업데이트    console.log(results);  });    // fetchSearchResults는 실제 서버 요청을 Observable로 감싸 반환하는 함수 예시  function fetchSearchResults(query: string) {    return new Observable(observer => {      fetch(`https://api.example.com/search?q=${encodeURIComponent(query)}`)        .then(response => response.json())        .then(data => {          observer.next(data.results);          observer.complete();        })        .catch(err => observer.error(err));    });  }  ```    ---           요약    - `fromEvent`는 DOM 이벤트를 Observable로 만들어줍니다.  - `switchMap`은 새로운 이벤트가 발생하면 이전 내부 옵저버블(예: 비동기 요청)을 취소하고 최신 이벤트만 남기도록 합니다.  - 두 연산자를 조합하면 사용자가 입력하는 순서대로 요청이 발생하지 않는 문제, 네트워크 낭비를 방지하는 효과를 볼 수 있습니다.  - 보통 검색어 자동완성, 실시간 필터링 같은 곳에서 많이 사용됩니다.    필요에 따라 `debounceTime` 등을 추가해 빈번한 이벤트 발행을 제어하는 것도 좋은 방법입니다.