작성
·
155
0
함수가 새로 그려지는게 useCallback 콜백 매개변수로 특정 값이 바뀔때마다 함수가 새로그려지는걸로 알 고 있습니다. 근데 예전부터 궁금했는데 한 번 그려놓은 함수를 계속 사용하면 되는거아닌가요? 왜 특정 값이 바뀔때마다 useCallback을 해서 새로 그려야 되는건가요? 그냥 [] 빈 배열 값 넣고 시작, 끝일때 실행되게 하면 문법상 에러인가요?
답변 2
2
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]);
을 넣어야 합니다.
0
함수를 새로 그리지 않으면 state값이 업데이트가 되지 않는거군요... 그럼
const onClick = useCallback(() => {
console.log(name);
}, []);
은 영원히 'zerocho' 값이군요...
전 onClick 이벤트를 하는 버튼이 함수를 호출하면 값이 바뀔거라고 생각하고 한 번만 선언하면 되지 않나 생각했는데.. 잘못생각했었네요..