2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

switchMap과 scan을 함께 사용할 수 있나요?

_____
Q: switchMap과 scan을 함께 사용할 수 있나요?
A: 네, RxJS에서 `switchMap`과 `scan` 연산자를 함께 사용할 수 있습니다. `switchMap`은 내부 옵저버블을 매핑하고, 이전 구독을 취소하면서 새 구독을 실행하는 역할을 하며, `scan`은 누적(accumulation) 작업을 수행해 스트림의 상태를 축적할 때 사용됩니다.

---

Q: 어떻게 함께 사용하나요?
A: 일반적으로 `switchMap` 안에서 내부 옵저버블을 반환하고, 그 내부 옵저버블에 `scan` 연산자를 적용합니다. 또는 외부 스트림에서 `switchMap` 후에 `scan`을 사용하는 것도 가능합니다.
예:
```typescript
source$.pipe(
switchMap(value =>
innerSource$(value).pipe(
scan((acc, curr) => acc + curr, 0)
)
)
);
```

---

Q: 어떤 시나리오에서 유용한가요?
A: 예를 들어, 사용자의 입력에 따라 API 요청을 전송하고, 각 요청의 진행상황이나 결과를 누적해서 보여주고자 할 때 `switchMap`으로 새 요청을 처리하면서, `scan`으로 이전 결과나 상태를 누적 관리할 수 있습니다.

---

Q: 주의할 점이 있나요?
A: `switchMap`이 새로운 내부 옵저버블로 전환할 때 이전 구독은 취소되므로, `scan`으로 누적된 상태는 내부 옵저버블마다 독립적으로 초기화됩니다. 전체 누적 상태를 유지하고 싶다면 `scan`을 외부 스트림에 적용하는 게 적합합니다.

---

요약 :
- `switchMap`과 `scan`을 함께 사용할 수 있음
- `switchMap` 내부에서 `scan` 적용 가능
- 누적 상태 유지 범위를 주의해서 설계해야 함
- 적절히 조합하면 비동기 데이터 흐름과 상태 누적에 강력한 효과를 발휘함
네, switchMap과 scan을 함께 사용할 수 있습니다.

이 두 연산자는 모두 RxJS(리액티브 확장 라이브러리)의 오퍼레이터인데, 각기 다른 목적을 가지고 있어 상황에 따라 같이 쓰는 경우가 많습니다.

먼저 각각의 역할을 간단히 설명하면, - switchMap : 상위 Observable로부터 방출된 값을 받아 새로운 Observable로 매핑하며, 이전에 생성한 Observable이 아직 플러시되지 않은 경우 이를 취소하고 최신 Observable만 구독하도록 합니다.

즉, 내부 Observable이 바뀔 때마다 이전 것을 무시하고 최신 결과만 반영하는 역할을 합니다.

- scan : 누적 연산을 수행하는 오퍼레이터로, 배열의 reduce와 유사하게 이전 누적값과 현재 값을 합쳐 새로운 누적값을 만들어내는 데 사용됩니다.

예를 들어 이벤트가 여러번 발생할 때 그 값을 계속 누적해서 상태처럼 관리할 수 있습니다.

두 연산자를 함께 쓰는 일반적인 패턴은 다음과 같습니다: 1. 상위 Observable에서 여러 값(예: 사용자 입력, API 요청 등)이 방출되면 switchMap으로 각 값을 기준으로 내부 Observable(예: AJAX 요청 등)을 만듭니다.



2. switchMap이 구독하는 내부 Observable에서 여러 이벤트가 연속해서 발생할 수 있는데, 이 안에서 scan을 사용해 중간 상태를 누적하거나 결과를 점진적으로 만들어 나갑니다.



3. 이렇게 하면 최신 요청에 한해서 상태를 업데이트하면서, 각 내부 스트림의 이벤트들을 하나의 스트림으로 누적 관리할 수 있습니다.

예를 들어, 검색어를 입력할 때마다 API를 호출하고, 그 결과에서 일부 누적 데이터를 계산해야 하는 상황을 가정해보면: ```typescript searchInput$.pipe( switchMap(term => http.get(`/api/search?query=${term}`).pipe( scan((acc, results) => [...acc, ...results], []) )) ) ``` 위 코드에서, - searchInput$가 검색어 스트림을 내보내고, - 각 term을 기준으로 새 HTTP 요청 스트림을 만들되, - 이전 요청이 아직 응답 중이면 취소되고 최신 검색 결과만 응답됩니다.

- 내부 HTTP 요청이 여러번 결과를 방출할 수도 있는 경우, scan을 통해 받은 결과들을 누적해 한 번에 보여줍니다.

switchMap과 scan은 목적이 다르지만 RxJS 파이프라인에서 자연스럽게 조합하여 쓸 수 있고, 데이터 스트림을 최신 상태로 유지하며 누적 데이터나 상태 관리를 할 때 유용합니다.

다만 scan은 내부 Observable 내에서 사용하는 경우가 많고, switchMap은 바깥 Observable을 새 Observable로 전환할 때 주로 씁니다.

작성자: 최서진 [비회원] | 작성일자: 1년 전 2025-05-25 12:51:38
조회수: 164 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.