🔶 검색 결과 요청에 디바운싱 적용하기

사용자가 검색 키워드를 입력하면 검색 버튼을 누르지 않더라도 자동으로 검색 요청을 보내 결과가 표시되도록 기획하였다. 그런데 이 과정에서 서버에 과도하게 많은 요청을 보내게 된다는 문제점이 있어, 디바운싱을 적용해 개선한 과정을 소개하려고 한다.

검색 요청에 디바운싱 적용하기: useDebounce 훅

사용자가 검색바에 검색어를 입력할 때 입력하는 키워드가 변화함에 따라 검색 결과가 표시되도록 구현하고자 하였다.

🤔 문제점: 키워드가 변화할 때마다 요청을 보내면 서버에 보내는 요청의 수가 너무 많아지고, 검색 결과도 불필요하게 업데이트된다.

✔️ 개선 방안: 검색 요청에 디바운싱을 적용하자

아래와 같은 useDebounce 훅을 적용하였다.

useDebounce 훅 만들기

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

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

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

  return debouncedValue;
};

export default useDebounce;

위 useDebounce 훅은

• 변화하는 value를 input으로 받는다
• 마지막으로 바뀐 value를 delay 시간 후에 업데이트한다

즉, value를 업데이트하는 작업에 디바운싱을 걸어주는 역할을 한다.

useDebounce 훅 적용하기

이를 아래 코드와 같이 적용하였다.

const debouncedKeyword = useDebounce(keyword, 300);

useEffect(() => {
	// 검색 요청 보내기
}, [debouncedKeyword]);

• 검색 바의 input에 onChange 이벤트가 일어날 때는 keyword를 업데이트한다.
• keyword를 useDebounce의 인수로 넣고, 디바운싱이 적용된 debouncedKeyword를 반환하도록 했다.
• 서버에 요청을 보내는 작업은 debouncedKeyword가 변화할 때마다 실행되도록 한다.

적용 결과, 사용자가 delay 시간 내에 키워드를 계속 입력할 경우(e.g. 리 → 리액 → 리액트), 마지막에 입력한 키워드(e.g. 리액트)에 대한 요청만 전송되는 것을 확인할 수 있었다.

참고자료

useDebounce