[React] React의 setState는 비동기로 동작한다

이채현

💡 React의 setState는 비동기일까?

function App() {
  const [state, setState] = useState(0);

  const handleClick = () => {
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
  };

  return (
    <div className="App">
      <p>{state}</p>
      <button
        onClick={() => {
          handleClick();
        }}
      >
        +3
      </button>
    </div>
  );
}

export default App;

위 코드의 결과는 버튼을 눌러도 1씩 증가한다.

이유는?

💡 하나의 페이지나 컴포넌트 내에도 수많은 상태값이 존재한다. 만약 이 상태 하나하나가 바뀔 때마다 화면을 리렌더링 한다면 문제가 생길수도 있다.

때문에 리액트는 성능의 향상을 위해서 setState를 연속 호출하면 배치 처리하여 한 번에 렌더링하도록 하였다. 아무리 많은 setState가 연속적으로 사용되었어도 배치 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지하는 것이다.

결국, 위 코드는 setState 는 동일한 key 값에 대하여 이전의 값을 계속해서 덮어써서, 마지막 명령어만 수행되는 셈이다.

setState를 동기적으로 처리하려면!

setState의 인자로 함수를 집어넣는 것이다.

...
const handleClick = () => {
    setState((prevState) => prevState + 1);
    setState((prevState) => prevState + 1);
    setState((prevState) => prevState + 1);
  };
...

위와 같이 작성하면 setState 내 함수의 매개변수로 이전 상태 값이 들어오므로, 동기적으로 동작하는 것을 확인할 수 있다. 이제 한번의 버튼 클릭으로 카운트가 3씩 증가하는 것을 볼 수 있다.

결론

💡 - useState는 비동기적으로 동작하는 훅이다.

• 비동기적으로 동작하는 이유는 성능 최적화 때문이며, setState를 배치처리한다.
• useState를 동기적으로 처리하는 간단한 방법으로 인자에 함수를 넣는다.