useCallback

With·2021년 3월 9일
0
post-thumbnail

주의할 점

함수 안에서 사용하는 상태 혹은 props 가 있다면 꼭, deps 배열안에 포함시켜야 된다는 것 입니다. 만약에 deps 배열 안에 함수에서 사용하는 값을 넣지 않게 된다면, 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조 할 것이라고 보장 할 수 없습니다. props 로 받아온 함수가 있다면, 이 또한 deps 에 넣어주어야 해요.


Code

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"이 버튼을 누른 만큼 찍힌다.

profile
주니어 프론트엔드 개발자 입니다.

0개의 댓글