[React] setState가 비동기로 동작 하는 이유

setState는 useState에서 state의 값을 변경하는 훅으로 대부분 알고있을 것이다. 그렇게 setState를 쓰다가 console.log로 setState 된 것을 찍어보면 setState 한 것이 제대로 반영이 되어있지 않거나 useState의 초기값이 찍힌 경우가 한 번씩 있을 것이다. 이것은 단순히 setState가 비동기적으로 동작하기 때문인데 왜 setState는 비동기로 동작할까?

setState가 비동기로 동작하는 이유

useState에서 state 값이 변경되면 해당 컴포넌트부터 자식 컴포넌트까지 리렌더링이 된다. 그럼 상태 값이 여러 번 변경될 경우, 각각의 변경에 대해 리렌더링이 일어나고 성능면에서 이슈가 생길 것이다. 그래서 리액트는 하나의 이벤트 루프 동안 발생한 모든 상태 변경을 모아서 한 번에 리렌더링한다. 이것을 Batch Update라고 부른다.

import React, { useState } from "react";

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

  const handleClick = () => {
    setCount(count + 1);
    console.log("1st count:", count); // TODO: 증가 버튼 클릭 시 여기 무슨 로그가 나올까요?

    setCount(count + 1);
    console.log("2nd count:", count); // TODO: 증가 버튼 클릭 시 여기 무슨 로그가 나올까요?
  };

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

export default App;

증가 버튼을 처음 클릭하면 콘솔에는 count가 0으로 찍히고 실제 setCount에는 Batch Update로 인해 2가 아닌 1이 증가된 것을 확인할 수 있다.