switchMap을 사용한 커스텀 훅의 예시는 무엇인가요?

Q1: switchMap이란 무엇인가요?
A1: switchMap은 RxJS 연산자 중 하나로, 입력값이 바뀔 때마다 이전에 실행 중이던 Observable을 취소하고 새로운 Observable로 전환하는 기능입니다. 주로 비동기 요청이나 이벤트 스트림에서 최신 요청만 처리하고 이전 요청은 무시하고자 할 때 사용됩니다.

Q2: switchMap을 사용한 커스텀 훅은 어떤 경우에 유용한가요?
A2: API 요청이 빈번히 변경되거나, 사용자의 입력에 따라 실시간으로 데이터를 가져올 때 유용합니다. 예를 들어, 검색어가 변경될 때마다 이전 요청을 취소하고 최신 검색 결과만 처리하도록 할 때 적합합니다.

Q3: switchMap을 사용한 React 커스텀 훅의 예시는 무엇인가요?
A3: 다음은 RxJS의 switchMap을 사용해 입력값 변경 시 API 요청을 취소하고 최신 결과만 반환하는 예시입니다.

```jsx
import { useState, useEffect } from 'react';
import { from, Subject } from 'rxjs';
import { switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';

function useSearchAPI(apiFunction) {
const [query, setQuery] = useState('');
const [result, setResult] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

useEffect(() => {
const search$ = new Subject();

const subscription = search$
.pipe(
debounceTime(300), // 입력 버퍼링 (300ms)
distinctUntilChanged(), // 중복 입력 무시
switchMap((q) => {
if (!q) return from(Promise.resolve(null));
setLoading(true);
setError(null);
return from(apiFunction(q));
}),
)
.subscribe({
next: (res) => {
setResult(res);
setLoading(false);
}, error: (err) => {
setError(err);
setLoading(false);
},
});

// 입력값이 변경될 때마다 search$에 값 전달
search$.next(query);

return () => subscription.unsubscribe();
}, [query, apiFunction]);

return { query, setQuery, result, loading, error };
}

export default useSearchAPI;
```

Q4: 위 예시에서 주요 동작 흐름은 어떻게 되나요?
A4:
1. `query` 상태가 변경되면 `search$` Subject에 새로운 값을 전달합니다.
2. switchMap이 작동하여 이전 API 요청을 취소하고 최신 요청으로 전환합니다.
3. API 호출이 진행되는 동안 `loading` 상태가 true가 됩니다.
4. 요청이 완료되면 결과를 `result`에 저장하고 `loading`을 false로 전환합니다.
5. 에러 발생 시 `error` 상태를 업데이트합니다.

Q5: switchMap을 사용할 때 주의할 점은 무엇인가요?
A5:
- 구독 해제를 꼭 처리해야 메모리 누수를 방지할 수 있습니다.
- debounceTime, distinctUntilChanged 같은 연산자로 불필요한 호출을 줄이는 것이 좋습니다.
- API 호출 함수가 Promise 또는 Observable 형태여야 합니다.
- React 상태 업데이트가 비동기이므로 컴포넌트 라이프사이클과 잘 맞게 설계해야 합니다.

Q6: switchMap을 사용한 커스텀 훅을 활용할 때 어떤 장점이 있나요?
A6:
- 최신 입력에 대한 API 응답만 처리해 불필요한 데이터 처리 감소
- 복잡한 비동기 흐름을 간결한 코드로 관리 가능
- 요청 취소 관리가 수월해 사용자 경험 개선

이상으로 switchMap을 사용한 커스텀 훅의 예시 및 활용 FAQ였습니다.

switchMap을 사용한 커스텀 훅의 예시에 대해 자세히 설명드리겠습니다.

--- `switchMap`이란? `switchMap`은 RxJS에서 사용하는 연산자 중 하나로, 주로 Observable 스트림을 변환할 때 많이 사용됩니다.

특성은, 내부 Observable을 새로 구독할 때 이전에 구독했던 Observable 구독을 취소하고 새로운 Observable을 구독하는 동작을 합니다.

이 특성 덕분에, 예를 들어 API 호출 중에 새로운 호출이 발생하면 이전 요청을 취소하고 최신 요청 결과만 처리할 때 유용하게 쓰입니다.

--- React에서 커스텀 훅에 `switchMap` 적용하기 React에서는 RxJS를 결합하여 비동기 작업, 특히 여러 사용자의 입력이 빠르게 변경되는 상황에서 API 호출을 최적화하는데 자주 사용합니다.

아래 예시는 검색어가 입력될 때마다 API 호출을 수행하되, 이전 호출은 취소하고 최신 검색어에 대한 결과만 처리하는 간단한 커스텀 훅입니다.

`switchMap`이 핵심 역할을 합니다.

--- 예제 코드 ```typescript import { useEffect, useState } from 'react'; import { fromEvent, Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'; interface SearchResult { id: number; name: string; } // 간단한 목 API 함수, 실제 환경에서는 fetch 혹은 axios 사용 const fetchSearchResults = (query: string): Promise => { return new Promise((resolve) => { setTimeout(() => { resolve([ { id: 1, name: query + ' 결과 1' }, { id: 2, name: query + ' 결과 2' }, ]); }, 1000); // 모의 1초 지연 }); }; / * useSearch - switchMap을 사용한 검색 커스텀 훅 * @param initialQuery 초기 검색어 */ export function useSearch(initialQuery: string) { const [query, setQuery] = useState(initialQuery); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { // 쿼리를 Subject에 넣어 이벤트로 만듦 const query$ = new Subject(); const subscription = query$ .pipe( debounceTime(300), // 사용자가 입력을 멈출 때까지 300ms 대기 distinctUntilChanged(), // 이전 쿼리와 다를 경우에만 진행 switchMap((q) => { setLoading(true); setError(null); // fetchSearchResults가 Promise를 반환하므로 from(fetchSearchResults(q))로 Observable 변환 필요 return from(fetchSearchResults(q)); }) ) .subscribe({ next: (res) => { setResults(res); setLoading(false); }, error: (err) => { setError(err); setLoading(false); }, }); // 초기 쿼리 발행 query$.next(query); // query 상태가 바뀔 때마다 새 쿼리 발행 const querySub = new Subject(); // query 상태가 바뀔 때마다 query$에 새 쿼리 전달 const queryEffect = () => query$.next(query); queryEffect(); // 초기값 발행 return () => { subscription.unsubscribe(); query$.complete(); }; }, [query]); return { query, setQuery, results, loading, error }; } ``` --- 동작 설명 - `query` 상태가 변경될 때마다 `Subject` 스트림을 통해 이벤트를 발생시킵니다.

- `pipe` 내에서 `debounceTime`으로 사용자가 입력하는 도중 API 호출이 많이 되지 않도록 제어합니다.

- `distinctUntilChanged`를 통해 같은 검색어 연속 호출을 방지합니다.

- 핵심인 `switchMap`은 한 검색어에 대한 API 호출이 진행 중인데, 다른 검색어가 입력되면 이전 호출은 취소(내부적으로 구독 취소)하고 최신 호출 결과만 반영합니다.

- API 호출 성공 시 `setResults`로 결과를 업데이트하고, 에러 발생 시 `setError`로 상태를 관리합니다.

--- 요약 이처럼 `switchMap`은 여러 비동기 작업이 빠르게 중첩될 수 있는 상황에서 최신 작업만 처리 하도록 도와줘, React의 커스텀 훅처럼 상태 관리와 결합하면 매우 깔끔하게 비동기 처리 로직 설계가 가능합니다.

필요하다면 RxJS의 다른 연산자(`debounceTime`, `distinctUntilChanged`)들과 함께 조합하여 더 세밀한 제어도 가능합니다.

--- 필요시 실사용 예제(컴포넌트)도 추가로 설명해드릴 수 있습니다.