[react] 검색어 입력마다 API가 호출되지 않도록 API 호출 횟수 줄이는 법

input창에 검색어를 입력할 때마다 API가 호출되지 않고, 특정 기준(ms)동안 입력이 되지 않았을 때 입력된 값으로 API를 호출하도록 해줬다.

 

왜냐하면 유료 API를 사용했을 때, 입력마다 API가 호출되는 것이 큰 문제가 될 수 있기 때문이다.

예를 들어, 구글지도 API와 같은 것을 사용할 때 입력할 때마다 쿼리를 날리면 엄청난 손해이다. 쿼리 하나하나가 모두 돈이기 때문이다. 

 

 

debouncing

---

useDebounce라는 훅을 만들어서 사용을 했는데, 먼저 debouncing이 뭔지에 대해 알아보자.

 

debouncing은 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출되도록 하는 것이다. 

디바운싱은 앞에서 언급했던 상황처럼 검색에 자주 사용된다. 

 

 

코드 구현

---

1. useDebounce custom hook을 생성하여 검색어에 debounce를 적용

import { useEffect, useState } from 'react';

const useDebounce = (value: string, delay: number) => {
  const [debouncedValue, setDebouncedValue] = useState<string>(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
};

export default useDebounce;

 

2. 사용자가 검색어 입력을 시작한 후 500ms동안 입력이 없으면 API가 호출되도록 구현

const debouncedValue = useDebounce(inputValue, 500);
const [suggestedList, setSuggestedList] = useState<SuggestedListState>([]);

useEffect(() => {
  const fetchApi = async () => {
    // fetch 코드 있다고 가정
    console.info('calling api');
  };

  if (!debouncedValue) {
    setSuggestedList([]);
  } else fetchApi();
}, [inputValue, debouncedValue]);

debounceValue가 있을 때만 fetchApi를 호출하도록 해줬다. 

 

 

참고자료

---

• 제로초

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖