useDebounce

Introduction

useDebounce 훅은 React 애플리케이션에서 값에 대한 디바운스 기능을 쉽게 구현할 수 있도록 도와주는 커스텀 훅입니다. 디바운스는 특히 사용자 입력에 대한 반응을 최적화하거나 네트워크 요청을 효과적으로 관리하는 데 유용합니다.

이 훅을 사용하면 입력 값이 변경될 때마다 즉시 처리하지 않고, 일정 시간이 지난 후에 최신 값을 반영할 수 있습니다. 주로 검색 기능이나 실시간 데이터 요청과 같은 상황에서 불필요한 작업을 방지하고 성능을 개선하는 데 활용됩니다.

Example

import React, { useState } from "react";
​
const SearchComponent = () => {
  const [keyword, setKeyword] = useState("");
  const debouncedKeyword = useDebounce(keyword, 300);
​
  // 가상의 검색 함수 (검색 요청을 보내는 대신 콘솔에 로그를 출력)
  const search = (query) => {
    console.log("Searching for:", query);
  };
​
  // 검색어가 변경될 때마다 debouncedKeyword가 업데이트되므로,
  // debouncedKeyword를 사용하여 디바운스된 검색을 수행합니다.
  React.useEffect(() => {
    search(debouncedKeyword);
  }, [debouncedKeyword]);
​
  return (
    <div>
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="Type to search..."
      />
      <p>Debounced Keyword: {debouncedKeyword}</p>
    </div>
  );
};
​
export default SearchComponent;
​

useDebounce 훅을 사용하여 keyword 값에 디바운스를 적용하고, useEffect를 통해 debouncedKeyword가 변경될 때마다 검색 함수를 호출합니다. 이렇게 함으로써 사용자가 검색어를 입력할 때마다 즉시 검색 요청을 보내는 것이 아니라, 일정 시간이 지난 후에 한 번만 검색 요청을 보낼 수 있습니다. 이를 통해 성능을 향상시키고 불필요한 작업을 방지할 수 있습니다.

Hook

// React와 useState 훅을 불러온다.
import React, { useState } from "react";
import useUpdateEffect from "./useUpdateEffect";
​
/**
 * 값에 대한 디바운스를 도와주는 훅
 * @template T - 디바운스할 값의 타입
 * @param {T} value - 디바운스할 값
 * @param {number} delay - 디바운스를 위한 지연 시간(밀리초), 기본값은 500으로 설정
 * @returns {T} debouncedValue 디바운스된 값
 *
 * @example
 * const debouncedValue = useDebounce(keyword, 300)
 */
export default function useDebounce<T>(value: T, delay?: number): T {
  // debouncedValue 상태와 해당 상태를 업데이트하는 함수를 선언한다.
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
​
  // useUpdateEffect 훅을 사용하여 값이 업데이트될 때 디바운스 처리를 수행한다.
  useUpdateEffect(() => {
    // setTimeout을 사용하여 지정된 시간(delay) 후에 debouncedValue를 업데이트한다.
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay ?? 500);
​
    // clean-up 함수를 반환하여 이전에 설정한 타이머가 여전히 실행 중인 경우 clearTimeout으로 타이머를 취소한다.
    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]); // 값 또는 딜레이가 변경될 때마다 useEffect를 다시 실행한다.
​
  // 디바운스된 값을 반환한다.
  return debouncedValue;
}

1. 이 코드는 React에서 사용할 수 있는 디바운스 훅인 useDebounce를 정의한 것입니다. 디바운스는 특정 이벤트가 발생한 후 일정 시간이 지난 후에만 처리되도록 하는 기술로, 일반적으로 사용자 입력에 대한 반응을 최적화하거나 네트워크 요청을 관리하는 데 유용합니다. 이 훅은 입력 값 또는 어떤 값에 대한 디바운스를 적용하는 데 도움을 주는 것이 목적입니다.

   코드의 구조를 살펴보면:

   1. useDebounce 함수는 제네릭 타입 T를 받아서 해당 타입의 값을 디바운스합니다.

   2. 함수는 입력으로 주어진 값(value)과 디바운스를 위한 시간 지연(delay)을 받습니다. delay는 선택적 매개변수이며 기본값은 500 밀리초로 설정되어 있습니다.

   3. useState를 사용하여 현재 디바운스된 값을 상태로 관리합니다. 초기값은 입력된 값(value)로 설정됩니다.

   4. useUpdateEffect 커스텀 훅을 사용하여 컴포넌트가 업데이트될 때마다 효과를 실행합니다.

   5. 이 효과에서는 setTimeout을 사용하여 지정된 시간(delay)이 지난 후에 입력된 값으로 디바운스된 값을 업데이트합니다.

   6. 이 효과 함수는 클린업 함수를 반환하는데, 이 클린업 함수는 이전에 설정한 타이머를 해제하여 중복된 디바운스 이펙트를 방지합니다.

   이렇게 구현된 useDebounce 훅을 사용하면, 예를 들어 사용자의 키보드 입력과 같은 값이 변경될 때마다 즉시 처리하는 것이 아니라, 지정된 시간 동안 대기한 후에 처리함으로써 불필요한 연산이나 네트워크 요청을 최소화할 수 있습니다.