함수 안에서 사용하는 상태 혹은 props 가 있다면 꼭, deps 배열안에 포함시켜야 된다는 것 입니다. 만약에 deps 배열 안에 함수에서 사용하는 값을 넣지 않게 된다면, 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조 할 것이라고 보장 할 수 없습니다. props 로 받아온 함수가 있다면, 이 또한 deps 에 넣어주어야 해요.
const App = () => {
const [count, setCount] = useState(0);
const onClickCountUp = useCallback(() => {
console.log("count action");
setCount(count + 1);
}, []);
return (
<>
<div>{count}</div>
<button onClick={onClickCountUp}>버튼</button>
</>
);
};
[]
안에 count가 없으면, 가장 최신의 state
가 아닌 기존의 state
(0)을 참조하여 버튼을 클릭했을 때 그 값이 1
에 머물러 있다. onClick은 정상적으로 작동한다. 콘솔에 "count action"이 버튼을 누른 만큼 찍힌다.