state 비동기 업데이트 혼동

버튼을 클릭하면 콘솔에 항상 이전 값이 출력됩니다. 버그를 찾으세요:

JSX

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
    console.log('현재 count:', count);
  };

  return <button onClick={increment}>{count}</button>;
}

답변

setCount에 숫자를 직접 전달하면 안 됨 console.log가 React에서 작동하지 않음 onClick 핸들러 안에서 state를 읽을 수 없음 setCount 직후 count를 읽으면 아직 이전 값이 출력됨 (state 업데이트는 비동기)

로그인 후 제출하기