수정하기 - switchMap을 사용하여 여러 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 구독 취소 시 내부 비동기 작업을 취소하지 않을 수 있음(특히 P<a href='https://sangseek.com/sangseeks/romise/ko'>romise</a> 기반 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 호출을 관리하고 최신 상태를 효율적으로 유지하는 방법을 설계할 수 있습니다.