종종 사용자가 비동기 효과를 실행하기 위해 작업을 완료할 때까지 기다리기를 원합니다. 이에 대한 좋은 예는 사용자가 키를 누를 때마다 검색을 수행하는 것이 아니라 입력을 마친 후에 검색을 실행하는 것입니다. 이렇게 하면 UI 변경에 방해가 되거나 불필요하고 잠재적으로 비용이 많이 드는 가져오기 요청이 많이 발생하는 것을 방지할 수 있습니다.

이 게시물에서는 모든 효과를 디바운스하는 사용자 지정 React 후크를 작성합니다!

후크 작성

우리의 훅은 useEffect 훅처럼 보여야 합니다. 단, 디바운스하려는 시간에 대해 추가 매개변수time를 취해야 한다는 점이 다릅니다. 따라서 매개변수는 다음과 같아야 합니다.

효과 함수

종속성 배열

디바운스 시간

디바운스 동작 달성

디바운스하기 위해 사용자가 제공한 setTimeout 와 함께 time 를 사용합니다. 문제는 타임아웃이 실행되기 전에 효과가 다시 실행되면 타임아웃을 취소하고 새 타임아웃을 시작해야 한다는 것입니다. clearTimeout 와 함께 정리 기능을 사용하여 이를 수행할 수 있습니다. 따라서 우리의 후크는 다음과 같습니다.

import { useEffect } from "react";

function useDebouncedEffect(fn, deps, time) {
  const dependencies = [...deps, fn, time] 
  useEffect(() => {
    const timeout = setTimeout(fn, time);
    return () => {
      clearTimeout(timeout);
    }
  }, dependencies);
}

작동 중인 후크 보기

이 예제에서는 사용자가 텍스트 상자에서 입력을 중지할 때를 기반으로 디바운스된 지연에 일부 상태를 설정합니다. 여기 코드가 있습니다!

function App() {
  const [text, setText] = useState("")
  const [debounced, setDebounced] = useState("")

  useDebouncedEffect(() => {
    setDebounced(text);
  }, [text], 1000)

  return (
    <div className="App">
      <input onChange={e => {
          setText(e.target.value)
        }} value={text} 
      />
      <p>{debounced}</p>
    </div>
  );
}

그리고 실제로 사용해 보면... 작동합니다!