웹 사이트에서 항목에 대한 검색 기능을 구현해야 하는 경우가 많습니다. 자동 완성은 사용자의 검색 경험을 향상시키는 훌륭한 기능입니다.

React의 useEffect 후크를 활용하여 검색 상자에 대한 입력이 변경될 때마다 fetch API를 호출할 수 있다는 것을 알고 있습니다. 그러나 사용자가 단일 문자를 입력할 때마다 API 호출이 시작됩니다. 이로 인해 검색할 데이터 세트가 커지거나 사용자의 인터넷 연결 속도가 느린 경우 성능 문제가 발생할 수 있습니다. API 엔드포인트가 자주 발생하는 것을 방지하기 위해 자동 완성 기능에 대한 디바운스 기능을 구현할 수 있습니다.

쿼리 작성을 위한 디바운스 기능은 쿼리 처리 속도를 늦추는 방법으로, 사용자가 입력을 멈췄을 때 일정 시간이 지난 후에야 요청을 하게 됩니다. 이 후크로 추적하려는 상태를 래핑하고 언젠가는 대기한 후에만 setState를 래핑하는 것입니다. 그런 다음 API를 호출하는 useEffect 후크에서 후크에서 반환된 이 상태를 사용하여 API를 호출합니다.

후크의 모양은 다음과 같습니다.

import { useState, useEffect } from 'react';

const useDebounce = (value, timeout = 500) => {
    const [state, setState] = useState(value);

    useEffect(() => {
        const handler = setTimeout(() => setState(value), timeout);

        return () => clearTimeout(handler);
    }, [value, timeout]);

    return state;
}

export default useDebounce;

아이디어는 전달된 값(쿼리 텍스트)을 초기 상태로 사용하고 값의 변경을 수신하는 것입니다. 값이 변경될 때마다 이 함수의 useEffect 후크가 트리거되고 일정 시간(우리가 정의한 setTimeout) 후에 setState를 시도합니다. 그러나 사용자가 계속 입력하면 useEffect 후크가 다시 트리거되고 useEffect의 정리(return 문)가 먼저 실행되어 이전 시간 초과 핸들러를 지웁니다. 이것이 사용자가 입력을 중단한 후에만 상태가 반환되는 이유입니다.

다음은 가져오기 호출 useEffect 후크에서 이 후크를 사용하는 방법입니다(시연할 코드의 최소량만 표시함).

import React, { useState, useEffect } from 'react';

const [query, setQuery] = useState("");
const debouncedQuery = useDebounce(query, 500);

useEffect(() => {
            const fetchResults = () => {
                fetch(`https://api.someapi.com/search?q=${debouncedQuery}`)
                .then(result => result.json())
                .then(data => {
                    // parsed the data and set the options
                })
                .catch(err => console.error(err))
            }
            fetchResults();
    }, [debouncedQuery]);

라이브 데모를 확인하려면 링크를 클릭하십시오: Live Demo

오딜런 / 고양이 같은

고양이 브리디

고양이 품종 및 사진 검색 기능을 제공하는 단일 페이지 앱입니다.

Frontend: React, Ant Design Library

API: The Cat API

Ant Design 라이브러리를 사용하는 것은 이번이 두 번째이며 점점 더 편리해지고 있습니다.
여기에서 라이브 데모를 확인하세요.
Cat Breedy
랜딩페이지로 인사드립니다. "탐색"을 클릭하여 검색을 시작하십시오.

검색 경로에 도착하면 모든 67개 품종을 가져와서 페이지를 매깁니다(한 페이지에 9개). 모든 페이지를 클릭할 수 있습니다.
검색 상자에 "American"을 입력하고 고양이 품종 검색을 시작합니다. 사용자 지정 디바운스 후크가 쿼리에 래핑되므로 1초 후에 제안 드롭다운이 표시될 것으로 예상됩니다(500ms를 넣는 것이 더 좋을 것 같습니다).
이미지는 Ant Design의 Carousel 구성 요소로 지연 로드됩니다. React Slicker는 아래에서 작동합니다…

View on GitHub


웹 디자인, 프로그래밍 및 자기 개선에 대한 더 많은 향후 기사를 보려면 저를 팔로우하세요 😊