• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

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

23.06.13 20:10 작성 조회수 207

0

  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는

  1. false
    true

  2. true
    false

  3. fasle
    true

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

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

답변 2

·

답변을 작성해보세요.

0

i1004gy님의 프로필

i1004gy

질문자

2023.06.14

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

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

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

i1004gy님의 프로필

i1004gy

질문자

2023.06.14

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

setTerm(e.target.checked)

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

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

네 정확합니다!

0

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