useState 관련 문의드립니다.

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

useEffect 사용하기

해결된 질문

작성

324

useEffect의 두번째 파라미터에는 useState로 인해 할당된 변수인 time만 쓸 수 있는건가요?
function TimerComponent() { const [time, setTime] = React.useState(0); const cnt = 0; React.useEffect(function() { setTime(time+1); }, [cnt]); return ( <div> <h3>{time}초</h3> <button onClick={function() { cnt++; }}>1씩 올려주세요.</button> </div> ); }
이런식으로 사용이 안되는건가요?

HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow

답변 2

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.

두 번째 파라미터로 넘겨준 배열이 변경되었을 경우에만 useEffect가 실행되기 때문에 [time] 배열 안에 있는 time 변수만 감지하고, 그 외의 변수는 감지하지 않습니다.

따라서, 예시로 보여주신 코드의 경우 cnt 변수도 감지할 수 있도록 배열에 추가해주셔야 합니다. 코드를 수정하면 다음과 같이 될 거에요.

function TimerComponent() {
  const [time, setTime] = React.useState(0);
  const cnt = 0;
  React.useEffect(function() {
    setTime(time+1);
  }, [cnt, time]);

  return (
    <div>
      <h3>{time}초</h3>
      <button onClick={function() {
        cnt++;
      }}>1씩 올려주세요.</button>
    </div>
  );
}

이렇게 하면, cnt 변수도 변경되었을 때 useEffect가 실행되고, time 값이 업데이트됩니다.
조금 더 자세한 내용은 React 공식 문서의 “Effect Hook” 파트를 참고하시면 도움이 될 거예요. 감사합니다.

그랩

지식공유자

react에서 변경을 감지할 수 있는 변수들인 state와 props가 보통 들어가게 됩니다! useEffect 두번째 파라미터에 들어가는 변수가 변경이 됨을 감지해야 내부를 다시 실행할 수 있기 때문이죠.
만약 일반 변수를 넣게 되면 useEffect에서는 값의 변경을 감지할 수 없습니다. 실제로 값이 변경되더라도 React는 렌더링을 다시하거나 useEffect를 다시 호출하지는 않습니다!

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

useState 관련 문의드립니다.