switchMap을 사용하여 여러 API 호출을 동시에 관리하는 방법은?

Q1: switchMap이란 무엇인가요?
A1: `switchMap`은 RxJS에서 제공하는 연산자로, 기존 Observable이 방출한 값을 기반으로 새로운 내부 Observable을 생성하고 구독합니다. 이때 이전에 생성된 내부 Observable이 아직 완료되지 않았으면 구독을 취소하고, 최신 Observable만을 구독하는 특징이 있습니다.

Q2: 여러 API 호출을 동시에 관리할 때 switchMap을 어떻게 사용하나요?
A2: 사용자가 입력하거나 이벤트가 발생할 때마다 API 호출이 필요한 경우, `switchMap`을 사용하면 이전 API 호출이 아직 완료되지 않았더라도 방출된 최신 값으로 새로운 API 호출을 만듭니다. 즉, 오래된 호출을 취소하고 최신 호출 결과만 처리하기 때문에 불필요한 응답 처리를 방지합니다.

Q3: 여러 API를 동시에 호출하고 결과를 병합하려면 어떻게 해야 하나요?
A3: `switchMap` 내부에서 `forkJoin`, `combineLatest` 등 RxJS의 병합 연산자를 함께 사용합니다. 예를 들어, 여러 API 요청 Observable들을 배열로 만들어 `forkJoin`으로 묶고, `switchMap`에서 이 `forkJoin`을 리턴하면, 모든 API 호출을 동시에 실행하며 모든 결과가 도착했을 때 최종 결과를 받을 수 있습니다.

```typescript
sourceObservable.pipe(
switchMap(params => forkJoin([
apiCall1(params),
apiCall2(params),
apiCall3(params)
]))
).subscribe(results => {
// results는 [result1, result2, result3]
});
```
Q4: switchMap을 사용할 때 주의할 점은 무엇인가요?
A4:
- 이전 API 호출이 완료되지 않았을 때 해당 호출을 취소하거나 무시하므로, 모든 응답을 받아야 하는 경우에는 적합하지 않습니다.
- 내부 Observable이 오류를 발생시키면 상위 Observable도 종료될 수 있으므로, `catchError`를 적절히 사용해 에러를 처리해야 합니다.
- API 호출이 너무 많아질 경우 네트워크 부하가 발생할 수 있으므로 요청 빈도 조절(`debounceTime`, `throttleTime`)과 결합하는 것이 좋습니다.

Q5: 동시에 실행하는 API 호출 중 일부가 실패해도 전체 흐름이 중단되지 않도록 하는 방법은?
A5: 각 API Observable 내부에서 `catchError`를 써서 에러를 처리하거나 기본값을 반환하도록 만듭니다. 이렇게 하면 `forkJoin`이나 `combineLatest`가 하나의 실패 때문에 전체를 중단하지 않고, 가능한 결과들을 얻을 수 있습니다.

```typescript
switchMap(params => forkJoin([
apiCall1(params).pipe(catchError(() => of(null))),
apiCall2(params).pipe(catchError(() => of(null))),
apiCall3(params).pipe(catchError(() => of(null)))
]))
```

---

요약하자면, 여러 API 호출을 동시에 관리할 때 `switchMap`을 사용하면 최신 요청만 처리하고 오래된 요청은 취소할 수 있으며, 내부에서 `forkJoin` 등으로 여러 API 호출을 병렬 처리하고 결과를 합칠 수 있습니다. 에러 처리와 요청 빈도 제어는 필수적으로 고려해야 합니다.

switchMap은 RxJS에서 흔히 사용하는 연산자로, 내부적으로 이전 Observable의 구독을 취소하고 새로운 Observable로 전환하는 역할을 합니다.

여러 API 호출을 동시에 관리할 때 switchMap을 활용하는 방법을 이해하려면 기본 동작과 응용 방법을 구분해서 살펴보는 것이 중요합니다.

1. switchMap 기본 개념 - 이전 스트림 취소 switchMap은 새로운 Observable이 발행되면 기존에 실행 중인 내부 Observable의 구독을 자동으로 취소합니다.

즉, 최신 요청만 유효하며 이전 요청은 무시하거나 중단되는 방식입니다.

- 주로 입력 변화 시 API 호출에 적합 예를 들어 사용자가 검색어를 입력할 때마다 API를 호출한다면 switchMap을 사용해 이전 요청을 취소하고 최신 입력에 대한 결과만 최신 상태로 유지할 수 있습니다.

---

2. 여러 API 호출을 ’동시에’ 관리하는 문제와 switchMap switchMap은 “동시에 여러 API 호출을 모두 병렬로 보내고 결과를 함께 처리”하기 위한 연산자는 아닙니다.

오히려, 한 번의 스트림 내에서 발생하는 여러 API 호출 중 최신 호출만 살리는 데 특화되어 있습니다.

하지만 다음과 같이 실제 여러 API 호출을 효율적으로 관리하는 데 활용할 수 있습니다.

---

3. 여러 API 호출을 관리하는 대표적인 패턴 케이스 1: 순차적 API 호출 중첩 (연쇄 호출) ```typescript source$.pipe( switchMap(value1 => apiCall1(value1).pipe( switchMap(response1 => apiCall2(response1.someId)) ) ) ) ``` - 첫 번째 API 호출 결과를 바탕으로 두 번째 API 호출이 이루어지는 경우 적합. - switchMap이 중첩되어 이전 호출 취소 효과가 모두 적용됨. --- 케이스 2: 사용자의 입력에 따른 여러 API 호출 중 최신 요청만 유지 예: 검색창에 입력할 때마다 두 개 이상의 API 동일한 쿼리를 호출해야 할 경우 ```typescript input$.pipe( switchMap(query => forkJoin({ api1Result: apiCall1(query), api2Result: apiCall2(query) })) ) ``` - 입력이 바뀔 때마다 apiCall1, apiCall2가 병렬로 호출됨. - 입력이 바뀌면 이전 forkJoin의 모든 내부 호출이 취소되고 최신 호출만 살아남음. --- 케이스 3: 여러 API 호출을 병렬로 "항상 모두" 실행해야 하는 경우에는 switchMap보다는 다른 연산자 권장 - 만약 여러 API 요청을 동시에 보내고 각각의 응답을 별도로 처리하고 싶다면 forkJoin, combineLatest, zip 등이 더 적합합니다.

- switchMap은 오히려 오래걸리는 이전 호출을 취소하고 최신 호출만 반영하는 데 중점. ---

4. 실제 구현 시 주의사항 - 비동기 호출 취소 가능 여부 확인 switchMap은 Observable 구독 취소 시 내부 비동기 작업을 취소하지 않을 수 있음(특히 Promise 기반 API). AJAX 요청을 RxJS ajax 또는 HttpClient로 하면 취소 토큰을 지원해 실제 네트워크 요청 취소 가능.

- 에러 처리 내부 API 호출에서 에러가 나면 전체 스트림이 종료될 수 있으므로 catchError 등을 활용해 에러를 적절히 관리해야 함. - 성능 최적화 사용자 입력이나 반복 호출이 자주 일어나는 경우 debounceTime, distinctUntilChanged 등을 함께 사용해 불필요한 호출을 줄이는 전략 필요. --- 정리 - switchMap은 여러 API 호출 중 '항상 최신 요청만 유지'할 때 유용하다. - 여러 API를 병렬로 동시에 호출해서 모두 받아야 할 경우 forkJoin과 함께 switchMap을 조합 가능하다. - 직접 병렬 호출하는 경우는 switchMap보다는 forkJoin, combineLatest 등 별도 연산자가 적합하다. - 입력변경 시 API 호출 관리에 debounceTime, distinctUntilChanged 같이 다른 연산자도 같이 사용해서 최적화를 권장한다.

--- 예시 코드: 사용자 입력 따라 2개 API 호출(병렬) + 최신 요청만 유지 ```typescript input$.pipe( debounceTime(300), distinctUntilChanged(), switchMap(query => forkJoin({ users: userApi.searchUsers(query), posts: postApi.searchPosts(query) })) ).subscribe(results => { console.log('사용자 결과', results.users); console.log('게시글 결과', results.posts); }); ``` - 입력이 바뀌면 기존 요청은 취소됨(실제로 네트워크 요청 취소는 RxJS ajax 또는 HttpClient 사용 시 가능). - 두 API 호출은 병렬 실행되고 결과는 동시에 반환됨. - 항상 최신 입력에 관한 결과만 화면에 반영됨. --- 이렇게 switchMap을 기반으로 여러 API 호출을 관리하고 최신 상태를 효율적으로 유지하는 방법을 설계할 수 있습니다.