index12345678D

정답: 콘솔에서 보이는 count 값은 3이다.

You clicked 0 times

Console

    각 렌더링에서 count가 상수로 존재한다는 사실을 기억하자.

    직전 문제를 떠올리면 이 컴포넌트의 동작 또한 쉽게 예측할 수 있다. 버튼을 세 번 누른 후의 Counter 컴포넌트는 아래와 같다.

    function Counter() {
  const count = 3;
 
  function handleAlertClick() {
    setTimeout(() => {
      console.log("count = " + 3);
    }, 3000);
  }
 
  return (
    <div>
      <p>You clicked {3} times</p>
      <button onClick={() => setCount(3 + 1)}> increase count </button>
      <button onClick={handleAlertClick}> console.log </button>
    </div>
  );
}

    이 상태에서 "console.log" 버튼을 누르면 실제로 실행되는 코드는 다음과 같다.

    setTimeout(() => {
  console.log("count = " + 3);
}, 3000);

    따라서 3초 뒤에 콘솔에는 정확히 count = 3이라는 로그가 찍히게 된다. 여기서 "console.log" 버튼을 누른 이후에 count를 얼마로 증가시켰는지는 전혀 중요하지 않다. 렌더링이 여러번 일어날 수는 있지만, 각 렌더링 안에서는 count의 값이 그저 숫자로서 존재하기 때문이다.

    참고자료

    다음 문제 보기