switchMap으로 다른 Observable과 합치는 방법은?

Q1: switchMap이란 무엇인가요?
A1: switchMap은 RxJS 연산자로, 소스 Observable에서 방출된 값마다 내부 Observable을 생성하고 구독합니다. 새로운 값이 들어오면 이전 내부 Observable의 구독을 취소하고 새로운 내부 Observable만 구독합니다. 이는 주로 비동기 작업을 체인하거나 연속된 요청 시 최신 결과만 처리할 때 사용됩니다.

Q2: switchMap으로 다른 Observable과 합치는 방법은 무엇인가요?
A2: switchMap의 콜백 함수에서 다른 Observable을 반환하면 자동으로 내부 Observable이 구독되고, 최근 방출된 Observable의 값만 외부 Observable로 전달됩니다. 즉, 소스 Observable의 값이 바뀔 때마다 switchMap 함수 안에서 다른 Observable을 생성 및 반환하여 합칠 수 있습니다.

```typescript
import { of, fromEvent } from 'rxjs';
import { switchMap, ajax } from 'rxjs/operators';

// 예: 클릭 이벤트를 API 호출 Observable과 합치기
const clicks$ = fromEvent(document, 'click');

const result$ = clicks$.pipe(
switchMap(() => ajax.getJSON('https://api.example.com/data'))
);

result$.subscribe(data => console.log(data));
```
위 코드에서는 클릭 이벤트를 받을 때마다 ajax.getJSON이 반환하는 Observable과 합쳐져 결과를 출력합니다.

Q3: 왜 switchMap을 사용해서 합치는 것이 좋은가요?
A3: switchMap은 최신 입력에 대해서만 처리하고 이전 요청은 취소(구독 종료)하므로, 불필요한 API 호출 중첩이나 결과 혼선을 방지할 수 있습니다. 따라서 사용자 입력처럼 빠르게 변하는 소스에 적합합니다.

Q4: 다른 Observable과 합칠 때 switchMap과 concatMap, mergeMap 차이는 무엇인가요?
A4:
- switchMap: 새로운 입력이 들어오면 이전 내부 Observable을 취소하고 최신 것만 처리
- concatMap: 내부 Observable을 순차적으로 실행, 앞 요청이 끝나야 다음 요청 실행
- mergeMap: 내부 Observable을 병렬로 실행, 모든 결과를 합침
즉, switchMap은 항상 최신 결과를 원할 때, concatMap은 순서 보장이 필요할 때, mergeMap은 병렬처리가 필요할 때 사용합니다.

Q5: switchMap 사용 시 주의할 점은 무엇인가요?
A5: switchMap은 이전 내부 Observable을 취소하므로, 취소되어도 무방한 작업에 적합합니다. 취소 시 복구가 불가능한 작업 또는 반드시 모든 결과를 처리해야 하는 경우에는 적절하지 않을 수 있습니다. 또한 내부 Observable이 빨리 완료되지 않으면 취소 시점에 예상치 못한 동작이 발생할 수 있습니다.

---

요약하면, switchMap으로 다른 Observable과 합치는 방법은 switchMap의 콜백 함수에서 합치고자 하는 대상 Observable을 리턴하면 됩니다. 이 때 switchMap은 항상 최신 Observable만 구독하여 반응합니다.

switchMap은 RxJS에서 가장 많이 쓰이는 고차 연산자 중 하나로, 한 Observable의 값을 기반으로 새로운 Observable을 생성하고, 이전에 생성된 Observable이 아직 완료되지 않았다면 그것을 취소(구독 해제)하고 새로 생성한 Observable로 전환하는 역할을 합니다.

switchMap을 사용하면 서로 다른 Observable들을 효과적으로 합치고 조합할 수 있습니다.

switchMap으로 다른 Observable과 합치는 방법 1. 기본 사용법 switchMap은 주로 소스 Observable의 값이 방출될 때마다 새로운 Observable을 생성해야 할 때 사용합니다.

아래와 같은 구조를 갖습니다.

```typescript sourceObservable.pipe( switchMap(valueFromSource => { // valueFromSource를 이용해 새 Observable 생성 return someOtherObservable(valueFromSource); }) ) ``` 여기서 `someOtherObservable`은 valueFromSource를 입력으로 받아서 다른 Observable을 생성하는 함수입니다.



2. 다른 Observable과 합치는 과정 예를 들어, 사용자의 입력값을 감지하는 Observable과 서버에서 데이터를 가져오는 Observable을 합칠 경우, 사용자의 입력이 바뀔 때마다 서버 요청 Observable을 생성해야 합니다.

이때 이전 요청이 아직 완료되지 않았으면 취소하고 새 요청을 진행하도록 하는 것이 switchMap의 핵심 기능입니다.

```typescript fromEvent(inputElement, 'input').pipe( map(event => event.target.value), switchMap(searchTerm => http.get(`api/search?query=${searchTerm}`)) ).subscribe(results => { console.log(results); }); ```

3. 내부 Observable 결과를 합치는 패턴 기본적으로 switchMap은 내부 Observable이 방출하는 값을 외부 Observable이 방출하는 것처럼 전달합니다.

즉, `sourceObservable.pipe(switchMap(innerObservable))`의 결과는 내부 Observable의 값이 됩니다.

따라서 switchMap으로 다른 Observable과 합칠 때, 보고 싶은 결과값을 직접 반환하는 Observable을 만들어야 하고, 해당 Observable이 방출하는 값들이 최종 결괏값으로 전달됩니다.



4. 추가값을 함께 전달하는 방법 만약 원본 Observable의 값과 내부 Observable의 값을 동시에 사용하고 싶다면, 내부 Observable에서 두 값을 합친 새로운 Observable을 만들어 반환할 수 있습니다.

```typescript sourceObservable.pipe( switchMap(valueFromSource => otherObservable(valueFromSource).pipe( map(valueFromOther => ({ fromSource: valueFromSource, fromOther: valueFromOther })) ) ) ); ``` 이 때 최종 출력은 객체 형태로 두 소스의 값을 함께 받을 수 있습니다.



5. myObservable.pipe(switchMap(...)) vs myObservable.pipe(concatMap(...)) 차이 switchMap은 내부 Observable이 방출되기 전에 새로운 값이 들어오면 바로 이전 내부 Observable 구독을 해지합니다.

반면 concatMap은 내부 Observable들이 순차적으로 차례대로 실행/구독되도록 보장합니다.

따라서 다른 Observable을 즉시 취소하고 새 Observable로 교체해야 할 때 switchMap을 사용합니다.



6. 요약 - switchMap은 소스 Observable의 각 값마다 새로운 Observable을 생성해서 구독한다.

- 이전에 생성된 내부 Observable이 아직 실행 중이면 취소하고 최신 Observable로 전환한다.

- 내부 Observable이 방출하는 값이 최종 결과로 전달된다. - 내부 Observable에서 map 연산자를 사용해 원본 값과 내부 값 조합이 가능하다. - 다른 Observable과 합칠 때, 소스 값으로 새로운 Observable을 만들어 반환하는 방식으로 합친다. 즉, switchMap을 사용하는 가장 흔한 패턴은 "소스 Observable이 값을 방출할 때마다, 그 값을 바탕으로 새로운 Observable을 생성해서, 내부 Observable의 방출값을 최종 Observable의 방출값으로 치환함으로써 여러 Observable을 하나로 합치는 것"입니다.