[useThrottle] 값 변경을 일정 주기로 흘려보내는 훅

제작 과정

한 줄 요약

값이 아무리 빨리 바뀌어도 delay(ms)마다 한 번씩만 반영합니다. 첫 변경은 즉시 통과(leading), delay 안에 몰린 변경들은 마지막 값 하나로 모아 끝에 한 번 더 통과(trailing)시켜 누락이 없습니다.

이럴 때 필요해요

스크롤resizepointermove처럼 초당 수십~수백 번 발생하는 이벤트를 다룰 때. debounce는 '멈춘 뒤 한 번'이라 진행 중엔 아무것도 안 나오지만, throttle은 '진행 중에도 주기적으로 계속' 흘려보내야 하는 곳(진행률 표시, 따라다니는 UI)에 맞습니다.

어떻게 동작하나

마지막 반영 시각과 현재 시각의 경과(elapsed)를 비교합니다.
elapsed delay면 즉시 반영(leading).
아니면 남은 시간(delay-elapsed) 뒤에 마지막 값을 반영하는 트레일링 타이머를 겁니다 그 사이 값이 또 바뀌면 타이머를 갱신해 최신 값으로 합칩니다.

놓치기 쉬운 것

debounce와 혼동 금지 debounce는 '잠잠해지면 한 번', throttle은 '바쁜 와중에도 주기적으로'.
trailing이 없으면 마지막 값이 누락될 수 있음(이 훅은 trailing 포함이라 안전).
언마운트/값 변경 시 트레일링 타이머 cleanup 필수.

이런 곳에 써요

스크롤 진행률헤더 hide/show
resize 기반 레이아웃 재계산, 포인터 추적 UI

import type { Metadata } from "next"; import { UseThrottleDemo } from "./-components/UseThrottleDemo"; export const metadata: Metadata = { title: "useThrottle — 값 throttle 훅 (데모)", description: "스크롤·resize·pointermove처럼 매 프레임 들어오는 값을 일정 간격으로만 통과시키는 useThrottle 훅. leading + trailing 보장.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-white"> <UseThrottleDemo /> </main> ); }