useState에서 동일한 변경함수 각각 실행시키는 법

리액트 18버전 이상부터는 automatic batch 라는 기능이 생겼다.

동일한 state 변경함수들이 연달아서 여러개 처리되어야한다면
동일한 state 변경함수를 다 처리하고 마지막에 한 번만 재렌더링된다.

// ex
const plus = ()=>{
  setNum(num*2);
  console.log('num 곱하기: ', num);
  setNum(num+1);
  console.log('num 더하기:', num);
}

위 코드는 마지막 setNum(num+1)만 실행되어 num값이 +1만 증가한다.

변경함수를 각각 실행하고 싶다면, 변경함수(콜백함수) 이렇게 코드를 작성해서 콜백함수 첫번째 인자에 값을 넣으면 이전 state값이 들어간다.

// ex
const plus = ()=>{
  setNum((prev)=>{
    console.log('num곱하기: ', prev*2);
    return prev * 2;
  })
  setNum((prev)=>{
    console.log('num더하기: ', prev+1);
    return prev + 1;
  })
}