switchMap과 mergeMap을 혼합 사용하는 방법은 무엇인가요?

Q1: switchMap과 mergeMap 연산자는 무엇이며, 각각 언제 사용하는 것이 좋은가요?
A1: RxJS에서 `switchMap`은 내부 Observable이 변경될 때 이전 Observable을 취소하고 새로운 Observable을 구독하는 연산자입니다. 주로 최신 데이터만 필요할 때, 즉 이전 요청을 무시하고 새 요청만 처리할 때 사용합니다.
반면에 `mergeMap`은 모든 내부 Observable을 병렬로 구독하고 결과를 모두 병합합니다. 모든 결과를 받아야 하거나 병렬 처리 시에 적합합니다.

Q2: switchMap과 mergeMap을 혼합해서 사용하는 이유는 무엇인가요?
A2: 복잡한 비동기 흐름에서 일부 단계는 최신 결과만 필요하지만, 다른 단계는 모든 결과를 병렬로 처리해야 할 때가 있습니다. 이런 경우 한 연산자만 사용하기 어려워 두 연산자를 조합하여 처리합니다. 예를 들어, 최신 검색어로 API 호출(switchMap) 후, 여러 후속 작업을 병렬로 실행(mergeMap)할 수 있습니다.

Q3: switchMap과 mergeMap을 어떻게 혼합해서 사용하나요? 기본 예제는?
A3: 일반적인 패턴은 외부 Observable에서 `switchMap`을 사용해 가장 최신 데이터를 받고, 내부에서 여러 비동기 작업이 필요할 때 `mergeMap`을 사용하는 것입니다.

```typescript
sourceObservable.pipe(
switchMap(value =>
getDataObservable(value).pipe( // 최신 데이터 요청 (취소 가능)
mergeMap(data =>
processMultipleRequests(data) // 내부 요청을 병렬로 처리
)
)
)
).subscribe(result => { console.log(result);
});
```

위 예시에서 `getDataObservable`은 최신 값만 처리하는 것이 중요해서 `switchMap`을 사용했고, `processMultipleRequests`는 동시에 여러 요청을 처리해야 해서 `mergeMap`을 이용했습니다.

Q4: 혼합 사용 시 주의할 점은 무엇인가요?
A4:
- `switchMap`은 이전 Observable을 취소하므로, 반드시 취소해도 무관한 스트림에서 사용해야 합니다.
- `mergeMap`은 모든 내부 Observable을 병렬로 실행하므로, 리소스 부담이 클 수 있어 병렬개수 제한(concurrent 옵션)을 고려해야 합니다.
- 중첩된 Observable 구조가 복잡해지면 디버깅과 흐름 추적이 어려우니 가독성을 유지할 수 있도록 코드를 분리하거나 주석을 활용하세요.

Q5: 구체적인 믹스 사용 시나리오는 어떤 것이 있나요?
A5:
- 사용자 입력 이벤트에서 `switchMap`으로 최신 검색어만 처리 후, 결과 항목 각각에 대해 추가 데이터를 `mergeMap`으로 병렬 요청.
- 실시간 데이터 스트림을 `switchMap`으로 변경 감지 후, 여러 외부 API를 `mergeMap`으로 병렬 호출해 결합하는 경우.

---

요약하자면, `switchMap`은 최신 내부 Observable만 유지하며 이전 것을 취소할 때, `mergeMap`은 모든 내부 Observable을 처리할 때 유용하며, 이 둘은 RxJS 파이프라인 내에서 중첩하여 혼합해 사용할 수 있습니다.

switchMap과 mergeMap은 RxJS에서 Observable을 변환하거나 연쇄적으로 처리할 때 자주 사용하는 연산자입니다.

각각의 특징과 용도를 이해하고, 상황에 따라 두 연산자를 혼합해서 사용하는 방법을 아는 것은 복잡한 비동기 흐름을 관리하는 데 매우 유용합니다.

--- switchMap과 mergeMap의 역할 간략 정리 - switchMap 내부 Observable이 새로 생성되면 이전에 구독 중인 Observable을 취소하고 최신 Observable만 구독한다.

즉, 최신 요청이나 이벤트에 집중하고 이전 요청들은 무시할 때 유용하다. - mergeMap 내부 Observable들이 여러 개 있을 때, 모두 병렬로 구독하고 결과를 병합한다.

즉, 모든 요청의 결과를 받아 처리하고 싶을 때 사용한다.

--- 혼합 사용하는 이유 비동기 작업 중 특정 시점에는 "마지막 요청만 필요(예: 자동완성 검색)"하고 또 다른 시점에는 "동시에 여러 비동기 작업을 병렬로 처리해야 할 때"가 있습니다.

이 두 가지 요구 사항이 혼재된 복잡한 스트림 처리에서는 동시에 둘 다 쓰는 경우가 많습니다.

--- 혼합 사용하는 기본 개념 1. 외부 스트림에서 switchMap 사용 외부 입력이나 이벤트 스트림이 있을 때, 이벤트가 빠르게 연속해서 발생한다면 switchMap으로 이전 이벤트의 내부 Observable을 취소하고 최신 이벤트만 처리하도록 한다.



2. 내부 Observable 생성 시 mergeMap 사용 switchMap 내부에서 반환하는 Observable은 mergeMap으로 여러 개의 비동기 작업 또는 요청을 병렬적으로 실행하도록 한다.

즉, 먼저 외부 이벤트 흐름을 "최신 이벤트 중심"으로 관리하다가, 내부적으로는 각 이벤트에 여러 비동기 작업을 동시에 병렬로 실행하는 패턴입니다.

--- 실무 예시로 설명 예를 들어, 사용자의 검색어 입력 이벤트가 있다고 합시다. - 사용자가 입력을 연속해서 빠르게 하면 이전 입력에 따른 네트워크 요청은 취소하고 최신 입력에 대한 요청만 처리해야 합니다 → switchMap - 검색어에 대해 여러 API를 병렬로 호출해야 한다(예: 사용자 정보 검색 + 상품 검색 + 뉴스 검색) → 각각의 API 호출은 별개의 비동기 작업이므로 내부에서 mergeMap 으로 병렬 처리 ```typescript input$.pipe( debounceTime(300), switchMap(searchTerm => { // 내부에서 여러 개의 API 호출을 병렬로 처리 return of(searchTerm).pipe( mergeMap(term => httpSearchUsers(term)), mergeMap(term => httpSearchProducts(term)), mergeMap(term => httpSearchNews(term)), // 필요에 따라 forkJoin, combineLatest 등을 써서 결과 병합을 조절할 수도 있음 ); }) ).subscribe(results => { // results를 처리 }); ``` 위 예는 다소 단순화한 형태지만, 핵심은 외부 이벤트를 switchMap으로 최신 이벤트만 처리하면서 내부에서는 여러 비동기 요청을 mergeMap으로 병렬 병합 처리하는 구조라는 점입니다.

--- 응용 - 내부 mergeMap으로 여러 요청 병렬 처리 후 결과 합치기 mergeMap으로 여러 Observable을 처리하다가 결과를 하나로 묶고 싶다면 forkJoin이나 combineLatest와 결합할 수 있습니다.

- 내부에 다시 switchMap 사용 내부 비동기 연쇄작업 중에도, 예를 들어 일부 요청은 취소가 필요하면 내부에서 다시 switchMap을 쓸 수도 있습니다.

- 중첩 조합 상황에 따라 switchMap 내부에서 mergeMap을 쓰기도 하고, mergeMap 내부에서 다시 switchMap을 쓰는 등 복잡한 상호작용 구조를 설계할 수 있습니다.

--- 요약 - 외부 이벤트 스트림 → switchMap (이전 처리 취소, 최신 이벤트만 주목) - 내부 비동기 병렬 처리 → mergeMap (여러 내부 Observable 병렬 실행) - 필요에 따라 forkJoin, combineLatest 등과 결합하여 결과를 한꺼번에 묶거나 분석 이렇게 두 연산자를 적절히 혼합하면 복잡한 비동기 스트림 제어가 가능해지고, 불필요한 요청을 줄이면서 동시에 여러 비동기 요청을 효율적으로 처리할 수 있습니다.