switchMap을 사용한 코드 예제를 보여주세요.

Q1: switchMap이란 무엇인가요?
A1: switchMap은 RxJS 라이브러리에서 제공하는 고차 연산자로, 내부 Observable을 방출하는 소스 Observable에 대해 매핑하는 역할을 합니다. 이전에 구독 중이던 내부 Observable을 취소하고, 가장 최근에 방출된 Observable만 구독을 유지합니다.

---

Q2: switchMap을 사용하는 이유는 무엇인가요?
A2: 비동기 작업 중에 이전 요청을 취소하고, 최신 요청 결과만 처리하고자 할 때 사용합니다. 예를 들어, 사용자 입력에 따라 API 호출을 할 때, 빠른 입력 중 불필요한 요청을 막고 최신 요청 결과만 반영하는 데 유용합니다.

---

Q3: switchMap 기본 사용 예제는 어떻게 되나요?
A3: 사용자 검색어를 입력받아 API 호출하는 예제입니다.

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

// input 요소 선택
const searchInput = document.getElementById('search') as HTMLInputElement;

fromEvent(searchInput, 'input').pipe(
debounceTime(300), // 300ms 디바운스
distinctUntilChanged(),
switchMap(event => {
const query = (event.target as HTMLInputElement).value;
if (!query.trim()) {
return of([]); // 빈 입력 시 빈 배열 반환
}
return ajax.getJSON(`https://api.example.com/search?q=${query}`).pipe(
catchError(() => of([])) // 오류 시 빈 배열 반환
);
})
).subscribe(results => {
console.log('검색 결과:', results);
});
```

---

Q4: switchMap과 mergeMap, concatMap과 차이점은 무엇인가요?
A4:
- switchMap: 새로운 내부 Observable이 방출되면 기존 구독 취소 후 최신 Observable만 구독
- mergeMap: 모든 내부 Observable을 병렬로 구독하여 결과 합침 - concatMap: 내부 Observable을 순차적으로 하나씩 구독

즉, switchMap은 '최신 데이터 우선'이며, 이전 요청 취소가 필요할 때 적합합니다.

---

Q5: switchMap에서 발생할 수 있는 문제점은 무엇인가요?
A5:
- 내부 Observable 취소 시, 이전 요청이 완료되기 전에 중단되어 일부 데이터가 누락될 수 있음
- 부적절한 사용 시 데이터 누락이나 의도하지 않은 동작이 발생할 수 있음

이를 방지하려면 switchMap이 적합한 시나리오인지 판단하는 것이 중요합니다.

---

Q6: switchMap을 여러 단계로 중첩해서 사용해도 되나요?
A6: 네, 가능합니다. 예를 들어, 첫 번째 API 요청 결과를 바탕으로 두 번째 API 요청을 하고 싶을 때 switchMap을 중첩해 체인으로 사용할 수 있습니다.

```typescript
firstObservable.pipe(
switchMap(result1 => secondObservable(result1.id)),
switchMap(result2 => thirdObservable(result2.param))
).subscribe(finalResult => {
console.log(finalResult);
});
```

---

Q7: Angular에서 switchMap을 사용하는 예시는 무엇인가요?
A7: Angular 컴포넌트에서 Reactive Form의 valueChanges를 구독하여 서버 검색을 하는 예시입니다.

```typescript
this.searchForm.get('searchTerm').valueChanges.pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(term => this.apiService.search(term))
).subscribe(results => {
this.results = results;
});
```

---

이상으로 switchMap의 개념과 실제 활용 예제에 대한 FAQ를 정리했습니다.

`switchMap`은 RxJS에서 자주 사용하는 연산자 중 하나로, 주로 Observable을 변환할 때 사용됩니다.

`switchMap`의 주요 특징은 내부 Observable이 새로 만들어질 때마다 이전에 구독하던 Observable을 취소(해지)한다는 점입니다.

즉, 구독이 새로 바뀌면 이전 스트림은 자동으로 종료되어 최신 데이터만 받게 됩니다.

아래는 `switchMap`을 사용하는 간단하면서도 실용적인 예제를 TypeScript와 RxJS 코드로 설명하겠습니다.

--- 예제 상황 유저가 입력하는 텍스트를 서버에 검색 요청을 보내고 싶다고 가정합시다. 사용자가 타이핑을 멈추면 그 시점의 텍스트로 검색 API를 호출하여 결과를 받아 표시합니다.

만약 사용자가 빠르게 타이핑을 계속한다면, 이전에 날린 검색 요청은 무시하고 마지막 요청만 처리하고 싶습니다.

--- 코드 예제 ```typescript import { fromEvent, of } from 'rxjs'; import { debounceTime, map, switchMap, catchError } from 'rxjs/operators'; // 가상의 검색 API 함수 (실제로는 HTTP 요청이겠지만, 여기선 간단히 Promise 반환) function fakeSearchApi(query: string): Promise { return new Promise((resolve) => { setTimeout(() => { resolve([`Result for "${query}" 1`, `Result for "${query}" 2`, `Result for "${query}" 3`]); }, 1000); // 서버 응답 지연 1초 }); } // input 엘리먼트를 가져온다 (HTML에 있어야 함) const input = document.getElementById('search-input') as HTMLInputElement; if (input) { fromEvent(input, 'input').pipe( map(event => (event.target as HTMLInputElement).value.trim()), // 입력값 추출 debounceTime(300), // 300ms 동안 입력 없으면 이벤트 전달 (과도한 요청 방지) switchMap(query => { if (query === '') { // 빈 문자열이면 빈 배열 반환 return of([]); } // 검색 API 호출 (Promise를 Observable로 변환) return from(fakeSearchApi(query)).pipe( catchError(err => { console.error('검색 중 에러 발생:', err); return of([]); // 에러 시 빈 배열 반환 }) ); }) ).subscribe(results => { // 검색 결과 처리 console.log('검색 결과:', results); // 여기서 화면에 결과 렌더링 가능 }); } ``` --- 설명 1. fromEvent(input, 'input') : input 박스에 입력 이벤트를 Observable로 만듭니다.



2. map : 이벤트 객체에서 실제 입력한 텍스트 문자열을 뽑아냅니다.



3. debounceTime(300) : 사용자가 타이핑을 멈춘 후 300ms 동안 이벤트가 없으면 다음 단계로 넘깁니다.



4. switchMap : 새 검색어가 들어올 때마다 이전에 호출한 검색 API 요청을 취소하고 새로운 요청만 구독합니다.



5. fakeSearchApi : 실제 API 호출 역할을 하는 Promise 함수입니다.



6. catchError : API 호출 중 에러가 발생하면 빈 배열로 처리해 UI 중단을 막습니다.



7. subscribe : 결과를 받아 콘솔에 출력하거나 화면에 렌더링합니다.

--- 핵심 정리 - `switchMap`은 내부의 Observable이 바뀔 때 이전 Observable을 자동으로 취소해 주므로, 검색처럼 최신 요청 결과만 반영해야 하는 상황에 최적입니다.

- 빠르게 여러 이벤트가 발생해도 마지막 이벤트 처리만 수행하며, 중복된 네트워크 요청을 방지할 수 있습니다.

--- 필요하면 Angular HTTP와 함께 사용하는 예제도 추가 설명해 드릴 수 있습니다.

언제든 말씀해 주세요!