React useDebounce에 대해 알아보자

 

아래와 같은 input의 값을 추적하는 코드가 있다고 가정해보자

 

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setDesc(e.target.value);
  };

이때 input 안의 value가 '한글자 한글자'변경될 때마다 리랜더링될 것이다.

예를들어 10글자를 입력하는데 이러한 동작을 수행한다면 매우 비 효쥴적일 것이다.

 

따라서 useDebounce hook을 제작하여 이를 방지해보자.

 

간단히 설명하자면 value와 delay를 지정하여 delay만큼 지난 value의 값을 리렌더링하는 것이다.

 

제네릭 타입으로 지정하여, 모든 자료형을 수용할 수 있게 하였다.

import { useState, useEffect } from 'react';

type debounceProps<T> = {
  value: T;
  delay: number;
};

export function useDebounce<T>({ value, delay }: debounceProps<T>): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => { 
      setDebouncedValue(value); //여기가 핵심!
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]); // warning 때문에 delay 추가

  return debouncedValue;
}

 

setTimeout을 이용하여, delay만큼 시간이 지난 후의 value를 setDebouncedValue에 넣는다.

 

다른 곳에서 사용할 때는 ..

 

const LabelInput = (props: LabelInputProps) => {
  const { title, placeholder, description } = props;
  const [desc, setDesc] = useState(description);

  const debouncedValue = useDebounce({ //여기서 호출
    value: desc,
    delay: 1000,
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setDesc(e.target.value);
  };

 

코드를 보면 실제로 debounceValue를 사용하는 부분은 존재하지 않는다

 

뭐야 적용 안된거 아니야?

할 수 있지만, useDebounce 함수 자체를 호출하고 있기 때문에 debounceValue에 저장되고 있다.