useDebounce hooks 관련 질문드립니다

Question

useDebounce함수 내에 있는 useEffect구문을 useEffect(() => {}, []); 이 형태로 바꿔주고 해봤습니다. 웹상에서 searchTerm을 입력할때마다 SearchPage가 리랜더링되고, 그 searchPage(index.js)에서 useDebounce를 사용하고 있고, 따라서 useDebounce에 있는 useEffect도 그때마다 재실행될 줄 알았습니다. 근데 아무리 searchTerm을 변경해줘도 useDebounce에 있는 useEffect는 한번만 실행됐습니다. 왜그런건가요? 제가 useEffect에 대해 잘못이해하고 있는거 같습니다만..

Donkeykong · Answer

ㅋㅋ

great80346486 · Answer

해당 훅을 호출하는 컴포넌트가 unmount될떄 clearTimeout이 실행되는게 맞나요?

John Ahn · Answer

안녕하세요! searchTerm을 바꾸면 바꿀 때마다 만약 useDebounce.js 에 소스코드가 export const useDebounce = (value, delay) => { const [debounceValue, setDebounceValue] = useState(value); useEffect(() => { console.log('triggered!'); const handler = setTimeout(() => { setDebounceValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value, delay]); return debounceValue; };   이런 식으로 되어 있다면 searchTerm을 바꿀 때마다 triggered! 가 log로 출력되게 됩니다. 이렇게 안 나오나요?