1. 🔍 왜 디바운스를 적용했는가?

사용자가 카테고리를 선택할 때마다 서버에 API 요청을 보내는 구조에서는 다음 문제가 발생할 수 있습니다:

• 너무 자주 API를 호출 → 서버 부하 증가
• 빠르게 여러 항목을 클릭할 경우 → 불필요한 중복 요청
• UX 측면에서도 매 클릭마다 반응하면 사용자가 버벅임을 느낄 수 있음

👉 이를 해결하기 위해 **lodash의 debounce**를 활용하여 요청 빈도를 제한했습니다.

2. ⏳ debounce란?

debounce는 짧은 시간 안에 반복해서 실행되는 함수 호출을 제어하는 기법입니다.

마지막 호출 이후 지정된 시간(delay)이 지나면 단 한 번만 실행됩니다.

📌 예시:

500ms 디바운스를 적용하면 사용자가 카테고리를 0.1초마다 클릭해도,

마지막 클릭으로부터 0.5초 뒤에 단 1번만 API 요청이 일어납니다.

3. ⚙️ useCallback vs useMemo – 언제 무엇을 써야 할까?

✅ useCallback

• 함수를 다시 만들지 않도록 메모이제이션합니다.
• 주로 onClick, onChange처럼 컴포넌트에 넘길 콜백 함수를 최적화할 때 사용합니다.

const handleClick = useCallback(() => {
  console.log('clicked!')
}, [])

✅ useMemo

• 값을 다시 계산하지 않도록 메모이제이션합니다.