setState 배치 업데이트 오해

버튼 클릭 시 count가 3이 아닌 1이 됩니다. 버그를 찾으세요:

JSX

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

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+3</button>
    </div>
  );
}

답변

세 번의 setCount 모두 같은 count(0)를 참조하여 최종 결과가 1이 됨 React는 이벤트 핸들러에서 state를 한 번만 업데이트할 수 있음 setCount를 연속 호출하면 마지막 호출만 적용됨 handleClick 함수가 잘못 바인딩됨

로그인 후 제출하기