switchMap이란 무엇인가요?
_____A: switchMap은 RxJS(리액티브 확장 라이브러리)의 연산자 중 하나로, Observable에서 방출된 값을 받아 내부에서 새로운 Observable로 매핑하고, 가장 최근에 생성된 Observable만 구독하는 기능을 제공합니다.
Q: switchMap의 주요 기능은 무엇인가요?
A: 입력 Observable이 새로운 값을 방출할 때마다 이전에 생성한 내부 Observable의 구독을 취소하고, 최신 값에 대해 매핑된 새로운 Observable만 구독하여 방출된 값을 다시 방출합니다.
Q: switchMap은 언제 사용하나요?
A: 비동기 작업(예: HTTP 요청, 검색창 입력 처리) 중 이전 요청을 취소하고 최신 요청만 처리하고자 할 때 주로 사용합니다. 예를 들어, 사용자가 입력을 빠르게 바꿀 경우 이전 요청은 무시하고 가장 최근 입력에 대한 응답만 받도록 할 때 유용합니다.
Q: switchMap과 mergeMap, concatMap의 차이점은 무엇인가요?
A:
- mergeMap: 내부 Observable들을 모두 구독하고 응답을 병합하며 순서 보장은 없음.
- concatMap: 이전 내부 Observable이 완료될 때까지 대기하고 순차적으로 구독.
- switchMap: 새로운 값이 오면 이전 내부 Observable을 취소하고 최신 내부 Observable만 구독.
Q: switchMap 사용 예시는 어떻게 되나요?
```typescript
searchInput$.pipe(
debounceTime(300),
switchMap(query => httpClient.get(`/search?q=${query}`))
).subscribe(results => {
console.log(results);
});
```
사용자가 검색어를 입력하면 300ms 디바운스 후 해당 검색어로 HTTP 요청을 보내고, 이전 요청이 있다면 취소하며 최신 요청 결과만 처리합니다.
Q: switchMap의 장점은 무엇인가요?
A: 불필요한 비동기 작업을 취소하여 리소스를 절약하고, 응답의 중복 처리나 순서 뒤섞임 없이 최신 데이터만 처리할 수 있는 장점이 있습니다.
Q: switchMap을 사용할 때 주의할 점은 무엇인가요?
A: 내부 Observable이 완전히 취소되는 경우에도 적절한 정리 로직(clean-up)이 필요할 수 있으며, 취소되는 Observable이 부수 효과(side effect)를 발생시키면 예상치 못한 문제를 일으킬 수 있습니다. 또한, 최신 데이터만 필요한 상황에 적합하지 않은 경우 다른 맵핑 연산자를 고려해야 합니다.
switchMap은 소스 Observable이 emit하는 값마다 내부 Observable을 생성하고, 이전에 생성된 내부 Observable의 구독은 취소하며, 가장 최근에 생성된 내부 Observable만 구독해서 그 결과만 구독자에게 전달하는 역할을 합니다.
좀 더 쉽게 설명하자면: 1. 소스 Observable이 값들을 방출할 때마다, switchMap은 이 값들을 받아서 새로운 Observable을 만들어 냅니다.
2. 이때 새로운 Observable이 만들어지면, 기존에 만들어졌던 내부 Observable에 대한 구독은 자동으로 해지(취소)됩니다.
3. 그리고 현재 만들어진 새로운 내부 Observable이 emit하는 값들만 최종 구독자에게 전달됩니다.
이 동작 방식 때문에, switchMap은 이전에 처리 중이던 비동기 작업이 더 이상 필요 없어졌을 때 자동으로 취소하게 해주므로 네트워크 요청, 입력 창에서의 사용자 입력 이벤트 처리 등에서 매우 유용합니다.
예를 들어, 사용자가 입력하는 검색어를 기반으로 서버에 검색 요청을 보낸다고 할 때, 사용자가 타이핑을 빠르게 하면 이전의 요청 결과는 더 이상 중요하지 않으므로 이전 요청을 취소하고 최신 요청 결과만 처리하기를 원합니다.
이런 상황에 switchMap을 사용하면 구현이 간편해집니다.
정리하면, switchMap: - 소스 Observable이 값을 내보낼 때마다 새로운 내부 Observable을 생성한다.
- 이전에 생성된 내부 Observable은 자동으로 구독 해지(cancel)된다. - 가장 최근에 생성된 내부 Observable의 결과만 구독자에게 방출한다.
이 때문에 switchMap은 비동기 작업의 취소와 최신 데이터 처리에 매우 적합한 연산자입니다.
작성자:
박지민 [비회원]
| 작성일자: 1년 전
2025-05-25 12:51:20
조회수: 164 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
조회수: 164 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.