디바운스를 적용한 비동기 제안

로컬 배열을 필터링하는 대신, 검색어에 일치하는 제안 항목을 반환하는 API 엔드포인트를 호출합니다. API 호출은 디바운스된 입력 값에 의존하는 useEffect 안에서 수행합니다. 이렇게 하면 필터링 책임이 서버로 이동하여 퍼지 매칭, 순위 지정, 훨씬 더 큰 데이터 집합의 제안을 사용할 수 있습니다.

자동 완성 기능에 두 개의 새로운 상태 변수를 추가합니다. 가져오기가 진행되는 동안 로딩 표시기를 보여 주기 위한 isLoading(불리언)과, 가져오기에 실패했을 때 오류 메시지를 표시하기 위한 error(문자열 또는 null)입니다. 이를 통해 제안 항목이 나타나지 않는 이유를 사용자가 궁금해하지 않도록 비동기 작업에 대한 피드백을 제공할 수 있습니다.

가져오기용 useEffect의 시작 부분에서 setIsLoading(true)와 setError(null)을 설정한 다음, fetch(url)를 호출하고 JSON을 파싱한 뒤 setSuggestions(data)를 호출합니다. 마지막으로 finally 블록에서 또는 성공 경로와 오류 경로가 모두 끝난 뒤 setIsLoading(false)를 설정합니다. 효과의 의존성 배열에는 debouncedInputValue만 포함합니다.

효과의 맨 위에서 새로운 AbortController를 만들고 controller.signal을 가져오기 옵션에 전달합니다. 정리 함수에서는 controller.abort()를 호출합니다. 사용자가 입력하여 디바운스된 값이 변경되면 새 가져오기가 시작되기 전에 이전 가져오기가 중단되므로, 오래된 결과가 순서와 다르게 도착하는 것을 방지할 수 있습니다.

가져오기가 중단되면 AbortError라는 이름의 DOMException과 함께 거부됩니다. catch 블록에서 if (err.name === 'AbortError') return;을 확인하여 중단된 가져오기는 조용히 무시합니다. 사용자에게 표시해야 하는 실제 네트워크 오류나 API 오류만 처리합니다.

가져오기 전에 isLoading을 true로 설정하고, 가져오기가 완료되거나 실패한 후 false로 설정합니다. 항상 초기화되도록 finally 블록을 사용합니다: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). finally 블록이 없으면 가져오기 오류가 발생했을 때 로딩 표시기가 영원히 실행되는 상태로 남습니다.

isLoading이 true이고 입력란에 텍스트가 있을 때는 제안 목록 대신 가운데에 로딩 표시기가 있는 드롭다운을 표시합니다. 이를 통해 사용자는 결과를 가져오는 중임을 알 수 있습니다. 로딩이 false가 되고 제안 항목이 도착하면 로딩 표시기를 실제 제안 항목으로 바꿉니다.

error가 null이 아니면 제안 항목 대신 오류 메시지가 있는 드롭다운을 표시합니다. "제안 항목을 불러올 수 없습니다. 다시 시도해 주세요."와 같은 메시지가 가공되지 않은 오류 문자열보다 사용자에게 더 친절합니다. 선택적으로 가져오기를 수동으로 다시 실행하는 재시도 버튼을 추가할 수 있습니다.

빈 문자열이나 너무 짧아서 관련 없는 결과를 지나치게 많이 만드는 검색어에 대해서는 가져오기를 실행하지 않습니다. 효과의 시작 부분에서 다음과 같이 조건을 확인합니다: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. 이렇게 하면 불필요한 API 호출을 줄이고, 한 글자만으로 결과 목록이 지나치게 길어지는 것을 방지할 수 있습니다.

가져온 결과를 useRef Map에 저장합니다: const cache = useRef(new Map()). 가져오기 전에 if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }를 확인합니다. 가져오기에 성공한 후에는 결과를 저장합니다. 이렇게 하면 사용자가 이미 입력한 검색어에 대해 네트워크 요청을 반복하는 일을 없앨 수 있습니다.

자동 완성에서는 200~300ms의 디바운스 지연 시간이 가장 적절합니다. 더 짧은 지연 시간(200ms 미만)은 빠르게 입력하는 사용자의 입력마다 요청을 너무 많이 발생시킵니다. 더 긴 지연 시간(400ms 초과)은 제안 기능을 느리고 반응이 둔하게 느껴지게 합니다. 250ms는 운영 환경의 자동 완성 구현에서 일반적으로 사용하는 기본값입니다.

API에서 가져오는 디바운스된 자동 완성 기능에서 AbortController가 중요한 이유는 무엇인가요?

디바운스된 값에 의존하는 useEffect 안에서 API 가져오기를 사용하여 정적 필터링을 교체합니다. AbortController를 사용하여 오래된 요청을 취소합니다. 사용자 피드백을 위해 isLoading 및 error 상태를 추가합니다. 과도한 호출을 피하도록 최소 문자 수 기준을 설정합니다. 중복 네트워크 요청을 건너뛰도록 참조 객체에 결과를 캐시합니다.