API를 호출할 때의 디바운싱(Debouncing)이란? 쓰로틀링(Throttling)이란?

✅ 디바운싱(Debouncing)이란?

짧은 시간 안에 연속해서 발생하는 이벤트를 제어해서, 마지막 이벤트가 끝난 뒤 일정 시간 이후에 한 번만 실행되도록 하는 기법

---

• 사용자가 타이핑할 때마다 API를 호출하면 서버 과부하
• 스크롤이나 리사이즈 이벤트는 너무 자주 발생
• 사용자가 입력을 “멈춘 후”에 한 번만 처리하고 싶을 때

---

• 사용자가 b, bi, bib, bibl, bible을 순서대로 입력
• 디바운싱을 적용하면: 마지막 입력(bible) 후 예: 500ms 대기하고 한 번만 API 호출

// React 예시
const [query, setQuery] = useState("");
const debouncedQuery = useDebounce(query, 500);

useEffect(() => {
  if (debouncedQuery) {
    fetchSuggestions(debouncedQuery); // 500ms 동안 입력이 멈춘 경우만 실행
  }
}, [debouncedQuery]);

⏱️ 디바운싱 vs 쓰로틀링(throttling)

항목	디바운싱 (Debounce)	쓰로틀링 (Throttle)
실행 타이밍	마지막 이벤트 이후 일정 시간	일정 간격으로 무조건 실행
예시	자동완성, 검색창	스크롤 이벤트, 윈도우 리사이즈
목적	최소한으로 호출	지속적으로 일정 간격 호출

---

🔧 구현 방식 (의사 코드)

function debounce(fn, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

✅ 요약

질문	답변
디바운싱이란?	연속된 이벤트 중 마지막 이벤트 이후 일정 시간 뒤에 한 번만 실행하는 전략
왜 쓰나?	불필요한 호출/연산 줄이기 위해
대표 예시	검색창 자동완성, 입력창 검증, 실시간 필터링 등

---