useDebouncedInputValue

input value를 관리하고, 디바운싱(debouncing)을 적용하는 커스텀 React 훅입니다

현재 입력 값과 디바운싱된 값을 제공하며, 값을 업데이트하고 리셋할 수 있는 함수도 함께 제공합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

type DebounceParameters = Parameters<typeof useDebounce>;

typescript

function useDebouncedInputValue(
  initialValue: string,
  wait: DebounceParameters[1],
  options?: DebounceParameters[2]
): {
  value: string;
  debouncedValue: string;
  onChange: (value: string) => void;
  onReset: () => void;
  onClear: () => void;
};

Parameters

Name	Type	Description
initialValue	string	초기 입력 값
wait	number	디바운스 지연 시간(밀리초)
options	{ maxWait?: number; leading?: boolean; trailing?: boolean; signal?: AbortSignal }	디바운스 동작 옵션

Returns

Name	Type	Description
value	string	현재 입력 값입니다.
debouncedValue	string	디바운싱이 적용된 입력 값입니다.
onChange	(value: string) => void	입력 값을 업데이트하는 함수입니다.
onReset	() => void	입력 값을 초기값으로 리셋하는 함수입니다.
onClear	() => void	입력 값을 빈 문자열로 초기화하는 함수입니다.

Usage

typescript

import { useState } from 'react';
import { useDebouncedInputValue } from '@modern-kit/react';

const Example = () => {
  const { value, debouncedValue, onChange, onReset, onClear } = useDebouncedInputValue(500);

  return (
    <div>
      <p>현재 입력 값: {value}</p>
      <p>디바운싱 입력 값: {debouncedValue}</p>
      <div>
        <input type='text' onChange={(e) => onChange(e.target.value)} value={value} />
      </div>
      <div>
        <button onClick={onReset}>Reset 버튼</button>
        <button onClick={onClear}>Clear 버튼</button>
      </div>
    </div>
  );
};

Example

현재 입력 값: initial

디바운싱 입력 값: initial