debounce와 throttle, 검색 입력엔 무엇을 써야 하나

핵심 요약

debounce는 "이벤트가 멈춘 뒤 N ms 후 한 번" 실행(연속 입력의 마지막만), throttle은 "N ms마다 최대 한 번" 실행. 검색 자동완성·입력 검증은 debounce, 스크롤·마우스무브·리사이즈처럼 주기적 반응이 필요하면 throttle.

1. 차이

	debounce	throttle
실행 시점	멈춘 뒤 1회	주기마다 1회
대표 용도	검색 입력, 자동저장	스크롤, 리사이즈

2. 검색 입력 debounce

useEffect(() => {
  const t = setTimeout(() => { search(query) }, 300)
  return () => clearTimeout(t)   // 입력 계속되면 취소
}, [query])

React에선 라이브러리 없이 위 패턴이 가장 깔끔하다.

3. 함정

debounce 지연이 너무 길면(500ms+) 느리게 느껴진다 — 250~350ms가 무난
이전 요청이 늦게 도착해 최신 결과를 덮어쓰는 race — AbortController로 취소
throttle은 마지막 이벤트를 놓칠 수 있으니 trailing 옵션 확인

자주 묻는 질문

자동완성에 throttle을 쓰면 안 되나요?

입력 중에도 계속 요청이 나가 불필요한 호출이 많아집니다. 사용자가 잠깐 멈췄을 때만 부르는 debounce가 적합합니다.

오래된 응답이 최신 입력을 덮어씁니다.

요청마다 AbortController로 이전 요청을 취소하거나, 응답에 쿼리를 실어 보내 현재 쿼리와 다르면 버리세요.