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

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

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.   결과의 순서 보장         여러 비동기 요청이 빠르게 발생할 때, 응답이 <a href='https://sangseek.com/sangseeks/도착/ko'>도착</a>하는 순서가 요청 순서와 다를 수 있는데, 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 호출, 실시간 데이터 스트림 처리 등에서 매우 자주 사용되는 연산자입니다.