수정하기 - switchMap을 사용하여 특정 이벤트에 반응하는 방법은?

닉네임

비밀번호

제목

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

switchMap은 RxJS에서 주로 사용되는 연산자로, Observable에서 발생하는 이벤트를 처리할 때 매우 유용합니다. 특정 이벤트에 반응하여 새 Observable을 실행하면서 이전에 실행 중인 작업을 취소하고 싶을 때 사용합니다. 이렇게 하면 이벤트가 빠르게 연속해서 발생해도 이전의 비동기 작업들이 불필요하게 계속 동작하는 것을 막을 수 있어 효율적인 처리가 가능합니다.    switchMap을 사용해 특정 이벤트에 반응하는 방법을 단계별로 설명하면 다음과 같습니다:    1.   이벤트 Observable 생성:         먼저, 이벤트를 감지할 Observable을 생성해야 합니다. 예를 들어, DOM 요소의 클릭이나 입력 이벤트를 RxJS의 `fromEvent` 함수로 Observable로 만들 수 있습니다.    2.   switchMap 적용:         이벤트 Observable에 `pipe`를 사용해 `switchMap` 연산자를 연결합니다. `switchMap` 내부에는 이벤트가 발생했을 때 실행할 함수를 작성합니다. 이 함수는 보통 새 Observable을 반환해야 합니다.    3.   이전 Observable 취소:         `switchMap`의 핵심 동작은 이전에 실행한 Observable이 아직 완료되지 않았다면 이를 취소하고, 가장 최근 이벤트에 대한 새 Observable을 구독한다는 점입니다. 이를 통해 빠른 이벤트 발생 중에서도 가장 최신 이벤트에 대한 결과만 처리하게 됩니다.    4.   결과 처리:         `switchMap` 내부의 함수가 반환하는 Observable에서 발생하는 데이터를 받아 최종적으로 구독하여 화면 업데이트나 다른 로직에 활용합니다.           예시 코드    ```typescript  import { fromEvent, ajax } from 'rxjs';  import { switchMap, map } from 'rxjs/operators';    // 입력란(input element)에서 'input' 이벤트를 감지  const inputElement = document.getElementById('searchBox');    const input$ = fromEvent(inputElement, 'input');    // 사용자가 입력할 때마다 API 호출을 하고, 이전 호출이 완료되지 않았으면 취소함  input$.pipe(    // 이벤트 객체로부터 입력값 추출    map(event => event.target.value),    // 새로운 입력값이 들어오면 이전 Ajax 요청 취소, 새 요청 실행    switchMap(searchTerm =>      ajax.getJSON(`https://api.example.com/search?q=${searchTerm}`)    )  ).subscribe(results => {    console.log('검색 결과:', results);    // 여기서 결과를 화면에 표시하는 코드 작성  });  ```           요점 정리  - 특정 이벤트를 Observable로 생성(`fromEvent` 사용 등)  - `switchMap` 안에서 이벤트 데이터 기반으로 새로운 Observable 반환  - 이전 Observable은 자동으로 취소되어 최신 이벤트만 처리  - 결과 Observable은 `subscribe`를 통해 최종 데이터 처리    이런 방식으로 switchMap을 사용하여 특정 이벤트(입력, 클릭 등)에 반응하며 효율적인 비동기 처리 로직을 구현할 수 있습니다.