useState 관련 문의드립니다.

안녕하세요, 인프런 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” 파트를 참고하시면 도움이 될 거예요. 감사합니다.

1. react에서 변경을 감지할 수 있는 변수들인 state와 props가 보통 들어가게 됩니다! useEffect 두번째 파라미터에 들어가는 변수가 변경이 됨을 감지해야 내부를 다시 실행할 수 있기 때문이죠.

2. 만약 일반 변수를 넣게 되면 useEffect에서는 값의 변경을 감지할 수 없습니다. 실제로 값이 변경되더라도 React는 렌더링을 다시하거나 useEffect를 다시 호출하지는 않습니다!