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

Q1: switchMap이란 무엇인가요?
A1: switchMap은 RxJS의 연산자로, Observable에서 이벤트가 발생할 때마다 새로운 내부 Observable로 매핑하며, 이전에 생성된 Observable의 구독은 자동으로 취소(switch)하는 기능을 합니다.

Q2: switchMap을 사용하여 특정 이벤트에 반응하려면 어떻게 하나요?
A2: 특정 이벤트를 Observable로 감싸고, 그 Observable에서 switchMap 연산자를 사용해 이벤트 발생 시 실행할 비동기 작업(예: HTTP 요청)을 연결합니다. 이벤트가 중첩 발생해도 마지막 이벤트에 대한 작업만 처리됩니다.

Q3: switchMap 사용 예제 코드를 보여주세요.
A3:
```typescript
import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

// 버튼 클릭 이벤트 Observable 생성
const button = document.getElementById('myButton');
const click$ = fromEvent(button, 'click');

// 클릭 이벤트 발생 시 API 호출 후 결과 처리
click$
.pipe( switchMap(() => ajax.getJSON('https://api.example.com/data'))
)
.subscribe(data => console.log(data));
```

Q4: switchMap을 특정 이벤트 처리에 사용하는 이유는 무엇인가요?
A4: 이벤트가 빠르게 연속 발생할 때 이전 비동기 작업의 결과를 무시하고, 가장 최신 이벤트에 대한 내부 Observable만 구독해 실시간성이 중요하거나 중복 처리 방지가 필요한 경우 적합합니다.

Q5: switchMap과 다른 연산자(mergeMap, concatMap)와의 차이는 무엇인가요?
A5:
- switchMap: 새로운 이벤트 발생 시 이전 Observable 취소
- mergeMap: 모든 내부 Observable 병렬 구독
- concatMap: 내부 Observable을 순차적으로 처리
따라서 특정 이벤트 중복 시 이전 작업을 취소하려면 switchMap을 사용합니다.

Q6: switchMap 사용 시 주의할 점은?
A6: 내부 Observable이 취소되므로, 취소로 인해 작업이 중단되어도 괜찮은 경우에 사용해야 하며, 취소된 Observable의 부수 효과(side effect)가 없는지 확인해야 합니다.

Q7: switchMap을 UI 이벤트에 적용할 때 유용한 사례는 무엇인가요?
A7: 자동완성 검색어 입력 처리, 버튼 클릭 중복 방지, 라이브 서치 및 입력값 기준 API 호출 등 이벤트가 빠르게 연속되어 이전 결과가 불필요할 때 사용합니다.

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을 사용하여 특정 이벤트(입력, 클릭 등)에 반응하며 효율적인 비동기 처리 로직을 구현할 수 있습니다.