switchMap이 비동기 요청에 어떻게 작용하나요?

Q: switchMap이 비동기 요청에 어떻게 작용하나요?

A: `switchMap`은 RxJS의 고차 연산자로, 외부 Observable에서 발생하는 값을 받아 내부 Observable로 변환하고, 내부 Observable에서 방출되는 값을 다시 외부 Observable로 방출합니다. 특히 비동기 요청 처리에 매우 유용합니다.

- 동작 방식
사용자가 이벤트(예: 입력값 변경)를 방출하면, `switchMap`은 해당 이벤트를 기반으로 내부 Observable(주로 HTTP 요청 등 비동기 작업)을 생성합니다.
만약 이전에 생성한 내부 Observable이 아직 완료되지 않은 상태에서 새로운 이벤트가 발생하면, `switchMap`은 이전 내부 Observable을 자동으로 취소(구독 해지)하고, 새로운 내부 Observable로 전환합니다.

- 비동기 요청에 미치는 영향
1. 중복 요청 방지 여러 이벤트가 빠르게 연속해서 발생할 때 이전 요청을 취소하므로, 사용자가 입력 중 불필요한 이전 요청들이 서버에 도달하지 않도록 합니다.
2. 최신 데이터 우선
항상 최신 이벤트를 기준으로 한 요청과 응답만 처리되므로, 불필요한 이전 응답에 의한 상태 업데이트를 막아 일관성을 유지합니다.
3. 네트워크 트래픽 절약
불필요한 요청이 줄어들어 서버와 네트워크 부하가 감소합니다.

- 예시
입력값 변화에 따라 자동으로 검색 API를 호출할 때, 사용자가 빠르게 입력하면 이전 요청들은 자동으로 취소되고 마지막 입력값에 대한 요청만 처리됩니다.

간단히 말해, `switchMap`은 비동기 요청을 다룰 때 최신 요청 유지와 이전 요청 취소를 자동으로 관리해 효율적인 비동기 작업 처리를 돕는 RxJS 연산자입니다.

switchMap은 RxJS에서 자주 사용하는 연산자로, 주로 비동기 작업을 처리할 때 매우 유용합니다.

비동기 요청을 다룰 때 switchMap이 어떻게 작용하는지 자세히 설명해 드리겠습니다.

기본 개념 switchMap은 Observable에서 발행된 값을 받아서, 해당 값을 기반으로 새로운 Observable(대개 비동기 요청을 반환하는 Observable)을 생성합니다.

그리고 이전에 생성된 Observable이 아직 완료되지 않은 상태라면 이를 자동으로 취소(unsubscribe)하고, 새로 생성된 Observable의 결과만 구독합니다.

비동기 요청에서의 작용 방식 비동기 요청(예: HTTP API 호출)을 처리하는 Observable이 여러 번 실행될 때, switchMap은 다음과 같은 효과를 냅니다: 1. 이전 요청 취소 예를 들어 사용자가 텍스트 입력을 빠르게 입력하는 검색창을 만들 때, debounceTime 같은 연산자와 함께 switchMap을 쓰면, 새로운 검색어에 대해 새로운 HTTP 요청을 만들면서 이전 요청은 자동으로 중단됩니다.

즉, 사용자가 "r", "re", "rea", "read"를 순서대로 입력하면, 각 입력마다 HTTP 요청 Observable이 생성되지만, switchMap은 이전 요청들을 모두 중단하고 최신 요청 결과만 받아 처리합니다.



2. 결과의 순서 보장 여러 비동기 요청이 빠르게 발생할 때, 응답이 도착하는 순서가 요청 순서와 다를 수 있는데, switchMap은 항상 마지막 요청에 대해서만 결과를 구독하므로, 오래된 요청이 나중에 완료되더라도 무시됩니다.

따라서 최신 요청의 결과만 UI 등에 반영할 수 있습니다.



3. 메모리 누수 방지 이전 Observable들을 취소(unsubscribe)하면서 구독을 클린업 하므로, 불필요한 리소스 사용이 감소됩니다.

실제 사용 예시 ```typescript this.searchInput$ .pipe( debounceTime(300), // 입력이 멈춘 뒤 300ms 대기 distinctUntilChanged(), // 이전 값과 같으면 생략 switchMap(searchTerm => this.http.get(`/api/search?q=${searchTerm}`)) ) .subscribe(results => { this.searchResults = results; // 최신 검색 결과만 반영 }); ``` 위 코드에서 사용자가 검색어를 입력할 때마다 http 요청 Observable이 생성되는데, switchMap이 이전 요청은 취소하고 최신 요청 결과만 구독하여 UI가 항상 최신 상태를 유지하도록 해줍니다.

요약 - switchMap은 새로운 Observable이 생성되면 이전 Observable 구독을 자동 취소한다.

- 비동기 요청에서 여러 요청이 연속 발생할 때 이전 요청을 중단하고 최신 요청만 처리한다.

- 결과가 역순으로 도착하더라도 최신 요청 결과만을 취급하기 때문에 데이터의 일관성을 보장한다.

- 메모리 누수와 불필요한 네트워크 요청을 줄여 효율적이다.

이러한 특성 때문에 switchMap은 사용자 입력 기반 API 호출, 실시간 데이터 스트림 처리 등에서 매우 자주 사용되는 연산자입니다.