[React] Queueing a Series of State Updates

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>+3</button>
    </>
  )
}

이렇게 하면

setNumber(0+1);
setNumber(0+1);
setNumber(0+1);

위의 코드는 스냅샷(0)으로 state의 값을 변경하고, 모든 setState가 호출된 뒤에 렌더링(일괄 처리) 되므로 결국 버튼을 한번 누를 때마다 1씩 증가한다.

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(n => n + 1);
        setNumber(n => n + 1);
        setNumber(n => n + 1);
      }}>+3</button>
    </>
  )
}

하지만 위의 코드로 짜면 3씩 증가한다.
n=> n+1 이 코드는 현재 state 값으로 계산이 되기 때문