서론

React 를 사용해 본 사람들은 대개 공감 할만한 몇 가지 상황들이 있는데, 대표적으로 다음과 같은 경우가 있다.

• 이벤트 핸들러 함수를 통해 state 를 업데이트하는 로직에서 2개 이상의 setState() 를 호출하면 1개의 setState() 만 호출 되는 경우

이론상으로 봤을 때는 setState() 가 2회 호출되어 state도 누적으로 업데이트 되어야하지만, 실제로는 1회만 업데이트 되는 것을 볼 수 있는데, 이러한 원인을 본론에서 알아보고자 한다.

본론

state 업데이트 시기 및 방법

setState() 는 다음 렌더링에 대해서만 실행된다.

import { useState } from 'react';

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>
    </>
  )
}

위와 같은 코드가 있을 때, 버튼을 클릭하면 number라는 state는 최종적으로 3이 되어야할 것 같지만 아이러니하게도 1 이 된다.
첫 번째 렌더링이 실행되는 동안 number 값은 0 이다. 이를 코드로 표현하자면 다음과 같다.

      <button onClick={() => {
        setNumber(0 + 1);
        setNumber(0 + 1);
        setNumber(0 + 1);
      }}>+3</button>

따라서, setState() 함수가 실행되는 그 순간(Snapshot)에 state 값을 기준으로 업데이트 된다고 할 수 있다.

결론

💡state update는 해당 컴포넌트의 렌더링을 유발하는 트리거 중 하나이다.
💡 useState를 호출하면 React는 렌더링에 대한 state snapshot을 제공한다.
💡모든 렌더링은 항상 Snapshot 을 확인한다.