switchMap으로 처리한 데이터의 변환 예시는 무엇인가요?

Q: switchMap으로 처리한 데이터의 변환 예시는 무엇인가요?

A: switchMap은 RxJS에서 사용되는 연산자로, 소스 Observable에서 방출된 값을 받아 내부 Observable로 매핑하고, 이전 내부 Observable은 취소하며 최신 Observable의 값만 방출합니다. 데이터 변환 예시는 다음과 같습니다.

예시 1: 사용자 ID를 받아 API 호출 결과를 변환

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

// 사용자 ID 스트림
const userId$ = of(1, 2, 3);

// API 호출을 흉내낸 함수 (Promise 반환)
function fetchUserData(id: number) {
return Promise.resolve({ id, name: `User${id}` });
}

// switchMap을 사용해 사용자 데이터를 받아 이름만 추출
userId$
.pipe(
switchMap(id => from(fetchUserData(id))),
map(user => user.name)
)
.subscribe(name => console.log(name));

// 출력: // User1
// User2
// User3
```

예시 2: 입력 값으로부터 API 검색 결과 변환

```typescript
import { fromEvent } from 'rxjs';
import { debounceTime, switchMap, pluck } from 'rxjs/operators';

const input = document.getElementById('search-input');

// 입력 이벤트로부터 검색어 접근
const search$ = fromEvent(input, 'input').pipe(
debounceTime(300),
pluck('target', 'value'),
switchMap(query => fetch(`https://api.example.com/search?q=${query}`)),
switchMap(response => response.json())
);

search$.subscribe(results => {
// API 응답 결과를 화면에 렌더링
console.log(results);
});
```

요약하자면, switchMap은 입력 값(예: ID, 검색어 등)을 받아 내부 Observable(API 호출 등)로 변환하며, 그 결과 데이터의 특정 필드만 추출하거나 JSON으로 변환하는 등 다양한 데이터 변환에 사용됩니다. 이 과정에서 이전 호출은 자동으로 취소되어 최신 데이터만 반영되는 것이 특징입니다.

switchMap 연산자는 RxJS에서 주로 사용되며, 내부적으로 한 옵저버블이 방출한 값을 기반으로 또 다른 옵저버블을 생성하고, 이전에 생성된 옵저버블 구독을 취소하며 새로운 옵저버블의 값을 방출하는 역할을 합니다.

따라서 switchMap을 사용하면 데이터 스트림을 변환하거나 비동기 호출 결과를 연쇄적으로 처리할 때 매우 유용합니다.

switchMap으로 처리한 데이터의 변환 예시를 자세히 설명해보겠습니다.

예를 들어, 사용자가 입력한 검색어를 받아서 서버에서 검색 결과를 가져오는 상황을 가정해봅니다.

사용자가 입력할 때마다 그 입력값을 기반으로 서버 API를 호출하고, 이전에 호출된 API 응답은 무시하고 최신 호출 결과만 화면에 반영하고자 합니다.

1. 입력값 스트림을 받는다.



2. 입력값을 서버 API 호출 함수에 매핑한다.



3. 서버 API 호출 결과를 다시 스트림으로 받고 처리한다.

```typescript import { fromEvent } from 'rxjs'; import { debounceTime, map, switchMap } from 'rxjs/operators'; import { ajax } from 'rxjs/ajax'; const searchInput = document.getElementById('searchBox'); const search$ = fromEvent(searchInput, 'input').pipe( // 입력 지연 시간을 300ms로 설정해 잦은 호출 방지 debounceTime(300), // 이벤트 객체에서 값을 추출 map(event => event.target.value), // 검색어를 매개변수로 하는 API 호출 옵저버블로 변환 switchMap(searchTerm => ajax.getJSON(`https://api.example.com/search?q=${searchTerm}`) ) ); search$.subscribe(results => { console.log('검색 결과:', results); // 이 결과를 화면에 렌더링하는 로직 작성 }); ``` 위 예시에서 switchMap은 사용자가 입력한 검색어를 기반으로 서버 호출 Observable로 변환합니다.

만약 사용자가 빠르게 여러 번 입력하면 이전에 발생한 API 호출 결과는 무시되고, 가장 최근 입력에 대해 발생한 요청만 처리합니다.

이는 switchMap이 이전 내부 Observable을 취소(cancellation)하고 새로운 내부 Observable로 전환하기 때문입니다.

즉, switchMap 안에서의 데이터 변환은, 입력값(string) → API 호출 Observable → API 응답(JSON 데이터) 흐름으로 이루어집니다.

이를 통해 데이터를 비동기적으로 변환하고 업데이트할 수 있는 구조를 만들 수 있습니다.

switchMap으로 처리한 데이터 변환 예시는: - 외부 입력값이나 이벤트를 받아서 - 내부에 새로운 Observable(예시에서는 API 호출)을 동적으로 생성하고 전환하며 - 최신 Observable의 결과 데이터를 최종 스트림으로 방출하는 것 이렇게 데이터를 변환하고 연쇄 처리하는 데 있어 매우 강력한 도구입니다.