prevState, Async를 Sync하게...

useState는 비동기다.

useState는 비동기로 작동한다. (그래?)
오늘 배운 한 예로 아래의 결과로 count값은 어떻게 변했을까.

const [count, setCount] = useState(0)

const AddCountHandler = () => {
  setCount(prev+1)
  setCount(prev+2)
  setCount(prev+3)
}

console.log(count)

count의 값은 6이 아닌 3이다. (엉?)

이유

React에서는 일정 시간동안 변경된 값을 모아 한번에 처리하는 배치처리를 통해 웹 페이지의 렌더링을 줄여 성능을 개선한다.

위의 코드는 AddCountHandler function 영역에서 동일한 setState가 발생하고 이를 비동기적으로 처리한다.
결국 AddCountHandler에서는 마지막의 setCount(prev+3)만 처리한다.

What Do I Do?

문제를 해결하기 위해서는 비동기를 동기처럼 동작하게 해야한다.
그러기 위해서는 setCount의 인자를 function으로 집어 넣어 해결해야했다.

const [count, setCount] = useState(0)

const AddCountHandler = () => {
  setCount(prev => prev+1)
  setCount(prev => prev+2)
  setCount(prev => prev+3)
}

console.log(count)

이렇게 arrow function을 사용하여 인자를 넘겨주면 비동기가 동기가 된다.
count의 값은 정상적으로 6이 처리된다.

정리

• setState는 비동기로 동작한다.
• 한 function 영역에서 반복되는 setState는 배치처리된다.
• 인자를 function으로 넣으면 동기적으로 동작한다.