useDebounce Custom Hooks

##

Debounce?

검색 입력 시 입력 결과가 나타날 때까지의 지연이 존재
이 바운스라는 Fucntion에 의해 제어
사용자가 미리 결정된 시간 동안 타이핑을 멈출 때까지 Keyup 이벤트의 처리를 지연
이렇게 하면 UI 코드가 모든 이벤트를 처리할 필요없이 서버로 전송되는 API 호출 수도 크게 줄어든다

useDebounce.js

value 또는 delay 값이 바뀔 경우 useEffect 호출

value 값이 바뀔 경우 : setTimeout Handler에서 delay 만큼의 시간동안 입력된 value를 setDeboundedValue에 값을 업데이트 해 준다
delay 시간 중 값이 바뀔 경우: clearTimeout으로 handler의 delay를 초기화해 준다

App.js

onChange={(e) => {setSearchTerm(e.target.value);}}
// onChange에서 바로 setSearchTerm 해 준다

...
const debouncedSearchTerm = useDebounce(searchTerm, 500);
// searchTerm 변경 시 useDebounce가 호출이 되고 딜레이 값은 500
// 바뀐 searchTerm을 이용해서 useDebounce 실행 후 debouncedSearchTerm을 반환

...

useEffect(() => {
	handleSearchInput(debouncedSearchTerm)
}, [debouncedSearchTerm])
// debouncedSearchTerm이 변경되면, useEffect에서 handleSearchInput을 실행한다

useBouncedValue로 반환한 searchTerm을 인자로 하여 해당 함수의 값을 반환한다