term을 consol.log로 찍었을 때 나오는 게 이해가 안되... - 인프런

[리뉴얼] React로 NodeBird SNS 만들기

회원가입 페이지 만들기(커스텀 훅)

term을 consol.log로 찍었을 때 나오는 게 이해가 안되어서 질문드립니다

작성

291

  const onChangeTerm = useCallback((e) => {
    setTerm(e.target.checked);
    console.log(term);
    setTermError(false);
  }, []);
  console.log(term);

이렇게 term의 consol.log를 찍어서 확인해 봤는데 setState는 비동기이기에 term의 초기값이 false라고 했을때 useState는 비동기이니

하면첫번째 term의 consol.log는

false
true
true
false
fasle
true

이런식으로 진행되야 할꺼 같은데
GOMCAM 20230613_2007350790.png

실제로 로그 를 찍어보니까 onChangeTerm안에 있는 console.log(term)은 계속 false로 찍힙니다 이유가 무었인가요?

react redux node.js express next.js

답변 2

i1004gy

질문자

그렇다면 더 이해가 안되는데 useCallback의 deps []이거로 설정되어있어서 실행이 안되는데 어쨰서 checkbox를 누를때 term이 true와 false가 번갈아 업데이트가 될 수있나요?

제로초(조현영)

지식공유자

[]로 되어있다고 실행이 안 되는 게 아닌데요? 실행은 됩니다. []일 때 실행이 안 되는건 useEffect고요.

내부 term 변수가 업데이트가 안 될 뿐이죠.

i1004gy

질문자

아 useCallback의 []안에 들어가는 변수는 가장 최신의 값을 참조하겠다는 뜻이고 아무것도 없으니 맨처음 정의한 term의 false가 계속 찍히는 거군요 하지만 파라미터 e는 계속 들어오니까

setTerm(e.target.checked)

setTerm은 e.target.checked를 계속 실행하고 term이 변경되는거군요

제가 useEffect랑 useCallback을 제대로 몰랐네요 감사합니다!

제로초(조현영)

지식공유자

네 정확합니다!

제로초(조현영)

지식공유자

useCallabck의 deps가 []로 되어있으니 함수가 업데이트 안 되는 겁니다. 리액트는 deps가 생명입니다.

인프런 커뮤니티 질문&답변

term을 consol.log로 찍었을 때 나오는 게 이해가 안되어서 질문드립니다