switchMap을 사용한 debounce 예시는 무엇인가요?

Q1: switchMap을 사용한 debounce란 무엇인가요?
A1: switchMap을 사용한 debounce는 RxJS에서 여러 비동기 스트림 중 가장 최근에 발생한 이벤트만 처리하고 이전 이벤트의 처리를 취소하는 방식입니다. 특히, 입력값 변경 시 불필요한 API 호출을 방지하기 위해 debounce 효과를 주고 싶을 때 유용합니다.

---

Q2: switchMap과 debounceTime의 차이는 무엇인가요?
A2: debounceTime은 이벤트가 발생한 후 일정 시간 동안 추가 이벤트가 없으면 마지막 이벤트를 방출하는 연산자입니다. 반면 switchMap은 내부 Observable이 새로운 값으로 대체될 때 이전 Observable을 취소하고 새로운 Observable을 구독합니다. debounceTime과 함께 사용하면 신속한 입력 중복을 걸러내고, switchMap으로 비동기 요청을 취소하며 최신 요청만 처리할 수 있습니다.

---

Q3: switchMap을 사용하여 debounce 효과를 구현하는 예시는 어떻게 되나요?
A3: 다음은 Angular에서 입력값이 변경될 때마다 API 호출을 하고, 입력 중복 호출을 막기 위해 debounceTime과 switchMap을 사용하는 예시입니다.

```typescript
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, switchMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app-search',
template: ``
})
export class SearchComponent {
searchInput = new FormControl('');

constructor(private http: HttpClient) {
this.searchInput.valueChanges.pipe( debounceTime(300), // 300ms 동안 입력 중단 시에만 처리
switchMap(searchTerm => // 이전 요청 취소, 최신 입력어로 API 호출
this.http.get(`/api/search?query=${searchTerm}`)
)
).subscribe(results => {
console.log(results);
});
}
}
```

---

Q4: switchMap을 사용했을 때 얻을 수 있는 장점은 무엇인가요?
A4: switchMap은 이전 Observable을 자동으로 취소해주므로 중복된 API 요청을 방지하고, 최신 검색 결과만 처리할 수 있습니다. 이로 인해 네트워크 자원을 효율적으로 사용하고 UI 응답성을 개선하는 데 도움이 됩니다.

---

Q5: debounceTime 없이 switchMap만 사용하면 어떻게 되나요?
A5: debounceTime 없이 switchMap만 사용하면 입력값이 바뀔 때마다 즉시 API 호출이 발생하여 네트워크 요청이 급증할 수 있습니다. debounceTime을 함께 사용하는 것이 일반적으로 불필요한 호출을 줄이기에 효과적입니다.

---

요약:
- debounceTime으로 입력 텀을 조절하고,
- switchMap으로 이전 비동기 작업을 취소하며,
- 최신 데이터만 처리하는 패턴이 흔히 사용됩니다.

이를 통해 입력값 변경에 따른 효율적인 비동기 처리와 debounce 효과를 구현할 수 있습니다.

switchMap을 사용한 debounce 예시는 주로 입력값이 빠르게 변경될 때 이전 요청을 취소하고 가장 최신의 입력값에 대한 처리만 수행하고자 할 때 사용됩니다.

RxJS에서 switchMap과 debounceTime 연산자를 조합하면 사용자가 빠르게 타이핑할 때 불필요한 API 호출을 줄이고, 마지막 입력값에 대해서만 서버 요청을 보내는 효과를 낼 수 있습니다.

아래는 switchMap을 사용해 debounce 효과를 구현하는 예시를 자세히 설명한 것입니다.

1. 상황 설명 사용자가 검색어를 입력하는 input 필드가 있다고 가정합니다.

사용자가 타이핑할 때마다 서버에 검색어를 보내 결과를 받아 표시해야 하지만, 사용자가 빠른 속도로 타이핑할 경우 중간중간 발생하는 검색어 변화에 대해 요청을 보내면 서버에 부담이 되거나 많은 불필요한 요청이 발생합니다.



2. 문제점 - 타이핑할 때마다 모든 값에 대해 요청이 발생 - 이전 요청이 완료되지 않았는데도 새 요청이 계속 발생 - 네트워크 과부하 혹은 불필요한 응답 처리 발생 가능

3. 해결 방법 - debounceTime + switchMap - debounceTime: 일정 시간(예: 300ms) 동안 입력이 없을 때만 이벤트 발생 - switchMap: 새로운 이벤트가 발생하면 이전 수행 중이던 내부 옵저버블을 취소하고 새 내부 옵저버블로 전환

4. 구현 예시 (TypeScript + RxJS) ```typescript import { fromEvent } from 'rxjs'; import { debounceTime, distinctUntilChanged, switchMap, map } from 'rxjs/operators'; // 가상의 API 호출 함수 (검색어를 받아서 Promise 또는 Observable 반환) function searchAPI(query: string): Promise { // 실제 구현에서는 HTTP 호출을 하겠지만, 여긴 예시로 1초 후 결과 반환 return new Promise(resolve => { setTimeout(() => { resolve([query + ' 결과 1', query + ' 결과 2']); }, 1000); }); } // 검색 input 엘리먼트 가져오기 const inputElement = document.getElementById('searchInput') as HTMLInputElement; // input 이벤트 스트림 생성 const input$ = fromEvent(inputElement, 'input').pipe( // 입력 이벤트에서 텍스트 값만 추출 map(event => (event.target as HTMLInputElement).value), // 입력값이 변경된 경우에만 진행 (연속된 동일값 필터링) distinctUntilChanged(), // debounceTime 적용: 마지막 입력 후 300ms 경과해야 다음 처리 debounceTime(300), // 입력된 검색어를 받아 API 호출 Observable로 switchMap 처리 switchMap(searchTerm => searchAPI(searchTerm)) ); // 구독하여 결과 사용 input$.subscribe(results => { console.log('검색 결과:', results); // 여기서 UI에 검색 결과를 렌더링하는 처리를 하면 됨 }); ```

5. 설명 - 사용자가 입력할 때마다 `input` 이벤트가 발생한다.

- `map`으로 입력값만 뽑아낸다. - `distinctUntilChanged`로 연속된 같은 값은 무시한다.

- `debounceTime(300)`으로 300ms 동안 입력이 멈출 때까지 대기한다.

- 입력이 멈춘 후 마지막 값에 대해 `switchMap`이 발동되고, 기존에 진행 중이던 검색 API 호출은 취소된다. - 결과가 오면 구독자에서 출력하고 UI 갱신 가능 즉, switchMap을 debounceTime과 함께 사용하면 불필요한 이전 요청을 취소하면서 마지막 입력값에 대한 요청만 남겨 처리할 수 있기 때문에 매우 효율적으로 검색창 등에서 활용할 수 있습니다.