마지막 변경 후 일정 시간이 지나야 값을 반영하는, 검색·자동완성에 가장 자주 쓰이는 훅
검색 input의 매 keystroke마다 API를 때리면 네트워크가 폭주하고 서버도 견디기 힘듭니다. useDebounce(value, delay)는 입력이 멈춘 뒤 delay ms가 지나야 마지막 값을 한 번만 반영합니다. 내부 구현은 useEffect + setTimeout + cleanup의 조합이 전부입니다. value가 바뀔 때마다 이전 timeout을 cleanup이 취소하고, 새 timeout을 잡습니다. 입력이
빨리 들어오면 계속 cleanup만 되다가, 멈추는 순간 마지막 setTimeout이 만료돼 값이 반영되는 구조.
이 데모에서는 raw input과 debounced input의 호출 카운터를 양쪽에 띄워, 같은 키 입력 횟수에 비해 debounced 쪽이 훨씬 적게 호출된다는 걸 시각적으로 보여줍니다. delay preset(150 / 300 / 600 / 1000ms)으로 응답성과 절감의 트레이드오프도 직접 체감할 수 있습니다.
import type { Metadata } from "next";
import { UseDebounceDemo } from "./-components/UseDebounceDemo";
export const metadata: Metadata = {
title: "useDebounce — 입력 throttle 훅 (데모)",
description: "키 입력을 일정 시간 유예하여 마지막 값만 반영하는 useDebounce 훅의 라이브 시연.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="min-h-[100dvh] bg-white flex items-center justify-center">
<UseDebounceDemo />
</main>
);
}