useThrottledCallback

제공된 콜백 함수의 스로틀링된 버전을 반환하는 React 훅이에요. 스로틀링된 콜백은 지정된 간격당 최대 한 번만 호출돼요.

인터페이스

function useThrottledCallback<F extends (...args: any[]) => any>(
  callback: F,
  wait: number,
  options?: { edges?: Array<'leading' | 'trailing'> }
): F & { cancel: () => void };

파라미터

• callbackrequired · F
  

  스로틀링할 함수예요.

• waitrequired · number
  

  호출을 스로틀링할 밀리초의 수예요.

• options{ edges?: Array<'leading' | 'trailing'> }
  

  스로틀의 동작을 제어하기 위한 옵션이에요.

  • options.edgesArray<'leading' | 'trailing'> · ['leading', 'trailing']
    

    함수가 시작점, 끝점 또는 둘 다에서 호출될지 여부를 지정하는 선택적 배열이에요.
    : 초기값은 ['leading', 'trailing']이에요.

반환 값

• F & { cancel: () => void }
  

  보류 중인 호출을 취소하는 cancel 메서드가 있는 스로틀링된 함수가 반환돼요.

예시

function SearchInput() {
  const throttledSearch = useThrottledCallback((query: string) => {
    console.log('검색어:', query);
  }, 300);

  return <input onChange={e => throttledSearch(e.target.value)} />;
}