렌더링 될 때마다 함수 새로 그려지는데 한 번 선언하고 계속 쓰면 안되는건가요:?

Question

함수가 새로 그려지는게 useCallback 콜백 매개변수로 특정 값이 바뀔때마다 함수가 새로그려지는걸로 알 고 있습니다. 근데 예전부터 궁금했는데 한 번 그려놓은 함수를 계속 사용하면 되는거아닌가요? 왜 특정 값이 바뀔때마다 useCallback을 해서 새로 그려야 되는건가요? 그냥 [] 빈 배열 값 넣고 시작, 끝일때 실행되게 하면 문법상 에러인가요?

zerocho · Answer

const [name, setName] = useState('zerocho'); const onClick = useCallback(() => { console.log(name); }, []); 이렇게 빈 배열만 넣은 경우에는 setName('nero'); 로 name을 변경할 때 console.log(name)이 여전히 zerocho로 나오게 됩니다. 이것을 nero로 나오게 수정하려면 const onClick = useCallback(() => { console.log(name); }, [name]); 을 넣어야 합니다.

yahoo23447340 · Answer

함수를 새로 그리지 않으면 state값이 업데이트가 되지 않는거군요... 그럼 const onClick = useCallback(() => { console.log(name); }, []); 은 영원히 ' zerocho' 값이군요... 전 onClick 이벤트를 하는 버튼이 함수를 호출하면 값이 바뀔거라고 생각하고 한 번만 선언하면 되지 않나 생각했는데.. 잘못생각했었네요..