React 상태 관리 정리

React를 사용하면서 가장 중요한 개념 중 하나가 "상태(State)"다. 상태를 어떻게 구조화하고, 공유하며, 유지 및 초기화할지에 따라 애플리케이션의 유지보수성과 성능이 크게 달라질 수 있다. 이번 글에서는 React 공식 문서를 기반으로 상태 관리의 핵심 개념들을 정리해보았다.

---

1. 상태 구조 결정하기

컴포넌트에서 상태를 어떻게 구성할지는 중요한 설계 요소다. React에서는 다음과 같은 기준을 고려하여 상태를 결정할 수 있다.

• 필요한 최소한의 상태만 유지: UI를 그리기 위해 필요한 데이터만 상태로 관리하고, 나머지는 계산된 값(derived state)으로 처리하는 것이 좋다.
• 상태는 어떤 컴포넌트에서 관리해야 할까?: 특정 컴포넌트에서만 사용하는 상태라면 해당 컴포넌트 내부에서 관리하는 것이 바람직하다. 하지만 여러 컴포넌트에서 공유해야 한다면 상위 컴포넌트로 끌어올리는 것이 필요하다.
• 상태 업데이트가 많다면 리팩토링 고려: 상태 변경이 너무 복잡해진다면, 상태를 분리하거나 Reducer로 관리하는 것도 고려해야 한다.

---

2. 상태 공유하기

컴포넌트 간에 상태를 공유하는 가장 기본적인 방법은 상태를 부모 컴포넌트로 올리고, 이를 props를 통해 자식 컴포넌트로 전달하는 방식이다.

• 부모 컴포넌트에서 상태 관리: 상태를 부모에서 관리하면 하위 컴포넌트는 props로 데이터를 받기만 하면 된다.
• 콜백을 사용하여 상태 변경 요청: 자식 컴포넌트에서 부모의 상태를 변경하려면 부모가 상태 변경 함수를 콜백으로 내려주면 된다.
• 상태가 너무 많아지면 Context나 Reducer 활용: 상태 공유가 깊어지거나 여러 곳에서 사용된다면 Context API 또는 Reducer를 활용하는 것이 좋다.

function ParentComponent() {
  const [count, setCount] = useState(0);
  return <ChildComponent count={count} onIncrement={() => setCount(count + 1)} />;
}

---

3. 상태 유지와 초기화

컴포넌트를 리렌더링하거나 다시 마운트할 때 상태가 어떻게 유지되거나 초기화되는지를 이해하는 것도 중요하다.

• 컴포넌트가 사라지고 다시 나타날 때: 같은 컴포넌트가 다시 나타날 때 상태를 유지할지, 초기화할지 결정해야 한다.
• useState의 초기값을 함수로 설정: 무거운 연산이 필요한 경우, useState의 초기값을 함수로 설정하면 성능 최적화가 가능하다.
• 키(key) 값을 활용한 리셋: React에서 key 값을 변경하면 상태가 강제로 초기화되므로, 특정 UI의 상태를 새로 초기화할 때 유용하게 활용할 수 있다.

function MyComponent({ userId }) {
  return <Profile key={userId} userId={userId} />;
}

---

4. Reducer를 활용한 상태 로직 정리

useReducer는 상태 관리 로직이 복잡해질 때 유용한 Hook이다. 상태를 업데이트하는 로직을 컴포넌트 내부가 아닌 별도의 함수로 분리하여 유지보수를 쉽게 할 수 있다.

• 언제 Reducer를 사용할까?
  • 상태 업데이트 로직이 복잡할 때
  • 여러 개의 상태가 서로 영향을 줄 때
  • 상태 변경이 명확한 액션을 기반으로 이루어질 때

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

---

5. Context API를 활용한 깊은 데이터 전달

useContext를 활용하면 props를 깊게 전달할 필요 없이 전역적으로 상태를 관리할 수 있다.

• Context를 사용해야 하는 경우
  • 여러 단계의 컴포넌트를 거쳐야 하는 props가 많을 때
  • 전역 상태가 필요할 때 (예: 테마, 사용자 정보 등)

const ThemeContext = React.createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>테마</div>;
}

---

6. Reducer와 Context를 함께 사용하기

상태가 많아지면 useReducer와 useContext를 함께 사용하여 전역 상태를 관리할 수도 있다.

const CountContext = React.createContext();

function CountProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <CountContext.Provider value={{ state, dispatch }}>
      {children}
    </CountContext.Provider>
  );
}

이 방식은 Redux와 비슷한 패턴을 따르며, 전역 상태를 Context를 통해 관리하면서도, useReducer를 활용해 상태 변경 로직을 정리하는 방식이다.

---

마무리

React에서 상태 관리는 단순히 useState를 사용하는 것 이상으로 다양한 방법이 존재한다. 컴포넌트의 구조와 상태의 사용 범위를 고려하여 적절한 상태 관리 방법을 선택하는 것이 중요하다. 기본적으로는 useState를 사용하지만, 상태가 복잡해지면 useReducer를 활용하고, 전역적인 상태 공유가 필요하면 useContext를 결합하는 것이 좋은 방법이다.

이 글이 React 상태 관리 구조를 고민하는 개발자들에게 도움이 되기를 바라며, 더 깊이 있는 내용이 필요하면 공식 문서를 참고하는 것도 추천한다.