Debounce 훅

리액트에서 useEffect와 useState를 사용하여 debounce hook을 만들 수 있습니다.

코드

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

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
}

설명

위 코드에서 useDebounce는 value 값이 delay 시간만큼 변경되지 않으면 debouncedValue 값을 변경합니다.

clearTimeout은 setTimeout 함수로 생성한 타이머를 취소하는 함수입니다. setTimeout 함수는 일정 시간이 지난 후에 지정된 함수를 실행하는 타이머를 생성합니다. clearTimeout 함수를 사용하면 이 타이머를 취소할 수 있습니다.

clearTimeout 함수는 setTimeout 함수를 사용하여 생성한 타이머의 인자로 넘겨진 값을 인자로 받습니다.

//  setTimeout 함수는 1000 밀리초 후에 "Hello, world!"를 출력하는 타이머
const timerId = setTimeout(() => {
  console.log("Hello, world!");
}, 1000);

// 타이머 취소.
clearTimeout(timerId);  // "Hello, world!"가 출력되지 않습니다.

사용법

이 hook을 사용하려면 다음과 같이 작성할 수 있습니다.

function MyComponent() {
  const [inputValue, setInputValue] = useState("");
  const debouncedInputValue = useDebounce(inputValue, 500);

  function handleInputChange(event) {
    setInputValue(event.target.value);
  }

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>Debounced value: {debouncedInputValue}</p>
    </div>
  );
}

위 코드에서 useDebounce hook을 사용하여 inputValue 값을 debouncedInputValue로 대체합니다. inputValue 값이 변경될 때마다 debouncedInputValue 값이 변경되지 않고, 500 ms 동안 값이 변경되지 않으면 debouncedInputValue 값이 변경됩니다.