switchMap을 사용하여 교차 이벤트를 처리하는 방법은?

Q1: switchMap이란 무엇이며, 언제 사용하는가요?
A1: switchMap은 RxJS 연산자로, 내부 옵저버블을 만드는 데 사용됩니다. 새로운 이벤트가 발생하면 이전 내부 옵저버블은 취소(구독 해제)되고, 새로운 옵저버블이 생성됩니다. 주로 사용자가 입력을 빠르게 변경하는 경우처럼 최신 이벤트만 처리하고 이전 이벤트의 결과를 무시하고 싶을 때 사용합니다.

Q2: 교차 이벤트(cross events) 처리에서 switchMap이 어떤 역할을 하나요?
A2: 교차 이벤트란 여러 이벤트가 서로 뒤섞여 발생하는 상황을 말합니다. switchMap은 최신 이벤트에 해당하는 옵저버블만 구독 상태로 유지하며, 이전 이벤트에 해당하는 옵저버블은 자동으로 취소해 최신 이벤트에 집중할 수 있도록 도와줍니다. 이를 통해 불필요하거나 오래된 이벤트 처리 결과를 무시하여 효율적인 비동기 처리가 가능합니다.

Q3: switchMap을 사용한 교차 이벤트 처리의 기본 예시는 어떻게 되나요?
A3: 예를 들어, 검색창에 사용자가 입력할 때마다 API 요청을 보내는 경우 다음과 같이 사용할 수 있습니다.

```typescript
input$.pipe(
switchMap(searchTerm => apiSearch(searchTerm))
).subscribe(results => {
// 최신 검색 결과만 처리됩니다.
});
```
여기서 이전 검색어에 대한 API 요청이 완료되지 않았더라도 새로운 입력이 들어오면 이전 요청이 취소되고, 최신 입력에 대한 요청만 처리됩니다.

Q4: switchMap 사용 시 주의할 점은 무엇인가요?
A4:
- 내부 옵저버블이 취소되므로, 이전 이벤트 결과가 중요한 경우에는 적절하지 않습니다.
- 에러가 발생하면 스트림이 종료되므로, catchError 등으로 에러 처리를 해주는 것이 필요합니다.
- 내부 옵저버블이 빠르게 종료되는 작업에 적합하며, 오래 걸리는 작업이라면 의도치 않게 작업이 중단될 수 있습니다.

Q5: switchMap이 교차 이벤트 처리에서 debounceTime 세팅과 함께 사용될 때의 이점은?
A5: debounceTime으로 이벤트 빈도를 줄이고, switchMap으로 최신 이벤트만 처리함으로써 불필요한 네트워크 요청 및 연산을 줄일 수 있습니다. 예를 들어, 사용자가 타이핑을 멈춘 후 일정 시간(delay) 지나서만 API 호출을 하며, 중간에 입력이 변경되면 이전 요청을 취소해 효율성을 높입니다.

Q6: switchMap과 다른 연산자(exhaustMap, concatMap, mergeMap)와 비교했을 때 교차 이벤트 처리에 적합한 이유는?
A6: switchMap은 새로운 이벤트가 오면 즉시 이전 내부 옵저버블을 취소하므로, 최신 이벤트를 우선 처리하는 상황에 적합합니다. 반면 concatMap은 순서 보장에, mergeMap은 병렬 처리에, exhaustMap은 현재 작업 중엔 무시하는 데 목적이 있어 교차 이벤트의 ‘가장 최신 이벤트만 처리’하는 요구에 부합하지 않습니다.

---

요약하면, switchMap은 교차 이벤트 상황에서 발생하는 여러 비동기 작업 중 가장 최신 이벤트에 대한 작업을 우선 처리하고, 이전 작업은 취소하여 리소스 낭비를 방지하는 데 가장 효과적인 RxJS 연산자입니다.

switchMap은 RxJS에서 자주 사용되는 연산자로, 특히 이벤트 스트림이 발생할 때 이전에 구독한 내부 옵저버블을 취소하고 새로운 옵저버블로 전환할 때 유용합니다.

‘교차 이벤트’를 처리한다는 것은 보통 특정 이벤트가 연달아 발생해서 이전 이벤트의 처리 결과가 더 이상 필요 없거나, 취소되어야 할 때를 의미합니다.

예를 들어, 빠르게 변하는 입력값에 대한 비동기 요청을 다룰 때 이전 요청은 무시하고 최신 요청 결과만 처리하고 싶을 때가 많습니다.

switchMap 작동 원리 - 외부 옵저버블(보통 이벤트 스트림)에서 값이 발생하면 switchMap 내부 함수가 호출되어 내부 옵저버블을 생성합니다.

- 새로운 값이 다시 들어오면 이전에 만들었던 내부 옵저버블을 자동으로 구독 해지(unsubscribe)하고, 새로 만든 내부 옵저버블의 결과를 구독합니다.

- 즉, 이전 이벤트의 결과는 더 이상 필요 없으면 버리고 가장 최신 이벤트에 대해서만 응답하는 패턴을 자연스럽게 만들 수 있습니다.

--- switchMap으로 교차 이벤트 처리하는 방법 1. 이벤트 소스 설정 예를 들어, 사용자의 입력 이벤트(`input` 이벤트나 버튼 클릭 등)를 RxJS의 `fromEvent` 등을 통해 옵저버블로 만듭니다.



2. switchMap 적용 이벤트 스트림에 `switchMap`을 적용하고, 내부에는 비동기 작업(예: HTTP 요청, 타이머, 기타 비동기 연산)을 반환하는 함수가 위치합니다.

이렇게 하면 이전 비동기 작업 취소가 자동으로 처리됩니다.



3. 이전 작업 자동 취소 새 이벤트가 오면 이전에 시작한 비동기 작업은 곧바로 중단되고, 새로운 작업이 시작됩니다.

이를 통해 사용자는 가장 최신 이벤트에 대한 결과만 받게 됩니다.

--- 예시 코드 설명 만약 사용자가 검색창에 입력할 때마다 서버에 검색어를 보내 결과를 가져온다고 가정하겠습니다.

```typescript import { fromEvent } from 'rxjs'; import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'; import { ajax } from 'rxjs/ajax'; const searchBox = document.getElementById('search'); const input$ = fromEvent(searchBox, 'input'); input$.pipe( debounceTime(300), // 사용자가 300ms 동안 멈출 때까지 기다림 distinctUntilChanged(), // 동일한 입력 무시 switchMap(event => { const query = event.target.value.trim(); if (!query) { return EMPTY; // 빈 입력일 때는 빈 결과 반환 } // ajax.getJSON()은 내부적으로 옵저버블 반환 return ajax.getJSON(`https://api.example.com/search?q=${encodeURIComponent(query)}`); }) ).subscribe(results => { // 결과 렌더링 console.log(results); }); ``` 위 코드는 사용자가 빠르게 입력해도 마지막 이벤트에 대해서만 서버 요청을 보내고, 이전에 요청된 서버 응답은 무시(구독 해지)하도록 구현되어 있습니다.

--- 요약 - switchMap은 각 이벤트마다 내부 옵저버블을 생성하고, 새로운 이벤트가 올 때 이전 옵저버블을 취소합니다.

- 이를 통해 교차 이벤트(동시에 여러 비동기 요청이 교차되는 상황)를 깔끔하게 처리할 수 있습니다.

- 특히 비동기 데이터 요청이나 이벤트 중첩 시 중복 처리 방지가 필요할 때 사용하면 효과적입니다.

- debounceTime, distinctUntilChanged 등과 함께 쓰면 더욱 최적의 UX를 제공합니다.

이처럼 switchMap을 사용하면 이벤트가 교차하는 상황에서도 최신 이벤트 위주로 반응하고 이전 이벤트에 대한 불필요한 작업 취소를 자동으로 수행할 수 있습니다.