useDebounce 사용자 지정 훅 구현

useDebounce 훅은 값과 밀리초 단위의 지연 시간을 받고, 해당 값의 디바운스된 버전을 반환합니다. 형식은 function useDebounce(value, delay)와 같습니다. 반환된 debouncedValue는 실제 값보다 늦게 반영되며, 다른 변경 없이 지정된 지연 시간이 경과한 후에만 업데이트됩니다.

훅 내부에서 상태 변수를 선언합니다. const [debouncedValue, setDebouncedValue] = useState(value)와 같이 작성합니다. 이 상태는 마지막으로 확정된 값을 보유합니다. 초기 값과 동일하게 시작하며 디바운스 타이머가 실행된 후에만 업데이트됩니다. debouncedValue를 읽는 컴포넌트는 안정적으로 확정된 입력을 확인합니다.

핵심 로직은 useEffect에 있습니다. setTimeout(() => setDebouncedValue(value), delay)로 타이머를 만들고 ID를 저장합니다. 효과는 value 또는 delay가 변경될 때마다 실행됩니다. 타이머는 마지막 변경 후 delay밀리초가 지나면 실행되어 디바운스된 상태를 업데이트합니다.

useEffect의 정리 함수는 clearTimeout(timerId)를 호출합니다. 타이머가 실행되기 전에 value가 변경되면 React가 정리 함수를 실행하여 대기 중인 업데이트를 취소합니다. 그런 다음 새 타이머를 예약합니다. 이것이 디바운스가 작동하는 핵심 메커니즘입니다. 빠른 변경이 계속 타이머를 재설정합니다.

useEffect의 의존성 배열에는 [value, delay]가 포함되어야 합니다. 입력 값이 변경될 때마다 효과가 다시 실행되어 새 타이머가 예약되고, 호출자가 디바운스 간격을 동적으로 조정하는 경우에는 delay가 변경될 때도 다시 실행됩니다. 오래된 클로저 문제를 피하려면 두 항목을 모두 포함해야 합니다.

사용법은 간단합니다. const debouncedSearch = useDebounce(searchInput, 300)과 같이 작성합니다. [debouncedSearch]를 의존성으로 사용하는 별도의 useEffect에서 API 호출을 발생시킵니다. 입력 상태인 searchInput은 즉시 업데이트되어 입력의 반응성을 유지하고, API 호출만 디바운스를 위해 기다립니다.

기본적으로 표준 구현은 마지막 호출 시점에서만 실행됩니다. 첫 번째 호출에서 함수를 실행하되 이후 호출에는 디바운스를 적용하는 "즉시" 모드가 필요하다면, 호출 여부를 추적하고 시간 초과 후 재설정할 참조가 필요합니다. 이는 더 복잡하지만 제출 버튼에 유용합니다.

타입 안전성을 위해 훅을 제네릭으로 만듭니다. function useDebounce(value: T, delay: number): T와 같이 작성합니다. 이렇게 하면 TypeScript가 value의 타입에서 debouncedValue의 타입을 추론할 수 있습니다. 제네릭 매개변수 T는 내부 상태와 반환 타입에 자동으로 전달됩니다.

자주 발생하는 실수는 useEffect에서 정리 함수를 반환하는 것을 잊는 것입니다. 정리하지 않으면 값이 변경될 때마다 새 타이머가 생성되지만 이전 타이머는 취소되지 않습니다. 그 결과 여러 타이머가 실행되어 오래된 값으로 setDebouncedValue가 여러 번 호출되고, 디바운스가 완전히 무력화됩니다.

lodash를 사용해 디바운스 함수 자체를 useRef에 저장하는 방법도 있습니다. 상태 기반 방식과 달리 참조 방식은 값이 아니라 콜백 함수에 디바운스를 적용합니다. 파생 값이 필요할 때는 상태 기반 훅을 사용하고, 이벤트 처리기에 디바운스를 적용해야 할 때는 콜백 방식을 사용합니다.

시간 초과 콜백 내부에 콘솔 기록을 추가하고 빠르게 입력하는 동안 브라우저 콘솔을 확인하여 훅이 제대로 작동하는지 검증합니다. 키 입력마다 하나의 기록이 아니라 입력 중지 이벤트마다 하나의 기록이 표시되어야 합니다. 빠르게 입력하는 동안 기록 수는 키 입력 수보다 훨씬 적어야 합니다.

useDebounce의 useEffect가 clearTimeout을 호출하는 정리 함수를 반환해야 하는 이유는 무엇입니까?

useDebounce(value, delay) 훅은 delay밀리초 동안 입력이 없을 때만 업데이트되는 디바운스된 상태를 보유합니다. 훅의 useEffect는 시간 초과를 설정하고 정리 과정에서 이를 지워 오래된 타이머를 취소합니다. API를 가져오는 효과의 의존성으로 디바운스된 값을 사용합니다. 완전한 타입 안전성을 위해 TypeScript 제네릭을 추가합니다.