React의 상태(State)란 무엇인가?

React를 사용하다 보면 상태(state) 라는 개념을 자주 접하게 된다. 상태는 UI의 특정 시점(snapshot)의 데이터를 의미하며, 이를 기반으로 컴포넌트가 렌더링된다. 하지만 상태가 어떻게 작동하는지 정확히 이해하지 못하면, 의도한 대로 동작하지 않거나 예상치 못한 버그가 발생할 수도 있다.

이번 글에서는 React 공식 문서에서 설명하는 'State as a Snapshot' 개념을 중심으로, 상태가 어떻게 동작하는지 알아보고자 한다.

---

상태(State)는 스냅샷이다

React에서 상태는 '시간에 따른 변화'를 표현하지만, 사실 개별적인 스냅샷(snapshot) 으로 동작한다. 즉, 한 번의 렌더링에서 특정 상태 값을 가지면, 그 렌더링 동안은 해당 값이 고정 된다.

예제 코드

import { useState } from "react";

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={handleClick}>+1</button>
    </div>
  );
}

위 코드를 보면 handleClick 함수에서 setCount(count + 1)을 세 번 호출하고 있다. 얼핏 보면 count 값이 한 번 클릭할 때마다 3 증가할 것 같지만, 실제로는 1만 증가한다.

이유는?

각 setCount(count + 1) 호출은 같은 count 값(이전 렌더링에서의 상태 값)을 사용하기 때문이다. React는 현재 렌더링의 state 값을 사용하므로, count의 초기값이 0이라면 각 setCount(count + 1) 호출은 0 + 1을 적용하게 된다. 결국, 최종적으로 count는 1만 증가하게 된다.

---

해결 방법: 함수형 업데이트 사용하기

이 문제를 해결하려면 함수형 업데이트(functional update) 를 사용해야 한다. 함수형 업데이트를 활용하면 최신 상태를 기반으로 새로운 값을 계산할 수 있다.

function handleClick() {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
}

위처럼 함수형 업데이트를 사용하면, React는 최신 상태 값을 보장해준다. prevCount는 React가 관리하는 가장 최신 상태 값이므로, 한 번 클릭할 때마다 count 값이 정확히 3씩 증가한다.

---

상태(State) 업데이트는 비동기적이다

React의 상태 업데이트는 비동기적(asynchronous) 으로 실행된다. 즉, setState가 호출된다고 해서 즉시 상태가 변경되는 것이 아니다. React는 여러 개의 상태 업데이트를 한꺼번에 처리하여 최적화하기 때문이다.

이를 확인하려면 console.log를 추가해 보면 된다.

function handleClick() {
  setCount(count + 1);
  console.log(count); // 예상: 증가된 값, 실제: 이전 값
}

위 코드에서 버튼을 클릭하면, console.log(count)는 증가된 값이 아니라 여전히 이전 상태 값을 출력한다. 이는 React가 상태 업데이트를 즉시 반영하는 것이 아니라 렌더링 후 반영하기 때문이다.

만약 상태 변경 후 즉시 최신 값을 확인해야 한다면, useEffect를 활용하는 방법도 고려할 수 있다.

useEffect(() => {
  console.log("Updated count: ", count);
}, [count]);

이렇게 하면 count가 변경될 때마다 최신 값이 콘솔에 출력된다.

---

정리

• React의 상태(State)는 특정 시점의 스냅샷이다.
• 하나의 렌더링에서 상태 값은 변하지 않는다.
• setState는 비동기적으로 처리되며, 최신 상태를 반영하기 위해서는 함수형 업데이트를 사용하는 것이 안전하다.
• 상태가 변경된 후 즉시 값을 확인하고 싶다면 useEffect를 활용할 수 있다.

React의 상태 관리는 간단해 보이지만, 내부 동작 방식을 이해하지 않으면 예상치 못한 동작을 경험할 수 있다. 기본 개념을 정확히 이해하면, 더욱 직관적이고 안정적인 코드 작성을 할 수 있을 것이다.

오늘도 즐코 빡코 !