수정하기 - switchMap을 사용한 커스텀 훅의 예시는 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

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): P<a href='https://sangseek.com/sangseeks/romise/ko'>romise</a><SearchResult[]> => {    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<SearchResult[]>([]);    const [loading, setLoading] = useState(false);    const [error, setError] = useState<Error | null>(null);      useEffect(() => {      // 쿼리를 Subject에 넣어 이벤트로 만듦      const query$ = new Subject<string>();        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<string>();        // 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`)들과 함께 조합하여 더 세밀한 제어도 가능합니다.    ---    필요시 실사용 예제(컴포넌트)도 추가로 설명해드릴 수 있습니다.