React에서 상태 관리의 필요성

 

React는 선언적이고 컴포넌트 기반의 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리로, 효율적인 렌더링과 유지보수를 가능하게 합니다. 그러나 프로젝트가 커질수록 UI가 복잡해지고 컴포넌트 간 상태(state)를 공유해야 할 경우가 늘어나면서, 효과적인 상태 관리의 중요성이 두드러집니다. 이번 글에서는 React에서 상태 관리의 필요성과 이를 해결하기 위한 다양한 접근법을 살펴보겠습니다.

---

상태(state)란 무엇인가?

React에서 "상태"란 컴포넌트의 동적인 데이터를 의미합니다. 상태는 사용자와의 상호작용, 서버에서 가져온 데이터, 또는 다른 이벤트로 인해 변경될 수 있으며, React 컴포넌트의 렌더링 결과에 영향을 미칩니다.

상태의 특징

1. 동적 데이터: 사용자가 버튼을 클릭하거나 입력 필드에 텍스트를 입력할 때처럼 상태는 변경될 수 있습니다.
2. React의 재렌더링 트리거: 상태가 변경되면 React는 해당 상태를 사용하는 컴포넌트를 다시 렌더링합니다.
3. 로컬 상태와 글로벌 상태: 상태는 단일 컴포넌트 내에서만 관리될 수도 있고, 여러 컴포넌트 간에 공유되어야 할 수도 있습니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;

위 예제에서 count는 컴포넌트의 상태이며, 버튼을 클릭할 때마다 상태가 업데이트되고 컴포넌트가 다시 렌더링됩니다.

---

상태 관리의 필요성

단순한 애플리케이션에서는 상태를 개별 컴포넌트 내에서 관리하는 것이 충분합니다. 그러나 애플리케이션이 복잡해질수록 다음과 같은 문제들이 발생합니다:

1. 컴포넌트 간 상태 공유

부모와 자식 컴포넌트, 혹은 형제 컴포넌트 간에 데이터를 전달해야 할 때 상태를 효율적으로 관리하는 것이 중요합니다. React는 이러한 데이터 흐름을 위해 **단방향 데이터 흐름(unidirectional data flow)**을 사용합니다. 하지만 상태가 여러 계층의 컴포넌트에 걸쳐 전파되어야 한다면, "Prop Drilling"이라는 문제가 발생할 수 있습니다.

function GrandParent() {
  const [data, setData] = useState("React 상태 관리");

  return <Parent data={data} />;
}

function Parent({ data }) {
  return <Child data={data} />;
}

function Child({ data }) {
  return <p>{data}</p>;
}

위와 같이 데이터를 하위 컴포넌트로 전달하기 위해 여러 단계에 걸쳐 props를 전달해야 하는 상황은 유지보수성과 가독성을 떨어뜨립니다.

2. 상태 동기화

여러 컴포넌트에서 동일한 데이터를 사용할 때, 상태를 한 곳에서 관리하지 않으면 상태 간 불일치가 발생할 수 있습니다. 예를 들어, 하나의 컴포넌트가 상태를 업데이트했지만 다른 컴포넌트는 이를 인식하지 못하는 문제가 생길 수 있습니다.

3. 복잡한 상태 로직

상태가 복잡해질수록 상태 업데이트 로직이 흩어지고 중복되기 쉽습니다. 이는 코드의 가독성을 떨어뜨리고 버그를 유발합니다.

---

React에서 상태 관리의 접근법

React에서는 다양한 상태 관리 방법을 제공합니다. 애플리케이션의 크기와 복잡성에 따라 적합한 방법을 선택해야 합니다.

1. 로컬 상태 관리

가장 기본적인 방법은 useState 또는 useReducer를 사용하여 상태를 개별 컴포넌트 내에서 관리하는 것입니다. 이는 상태가 특정 컴포넌트에서만 사용되는 경우 적합합니다.

2. Context API

React의 내장 도구인 Context API는 데이터를 컴포넌트 트리 전체에 전달하는 데 유용합니다. Context를 사용하면 Prop Drilling 문제를 완화할 수 있습니다.

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemeToggle />
    </div>
  );
}

function ThemeToggle() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      현재 테마: {theme}
    </button>
  );
}

export default App;

3. 글로벌 상태 관리 라이브러리

애플리케이션의 상태가 더욱 복잡하고 여러 컴포넌트에서 사용되어야 한다면, Redux, MobX, Zustand, Recoil과 같은 상태 관리 라이브러리를 사용할 수 있습니다.

Redux 예제:

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// 리듀서 정의
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>증가</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

---

결론

React 애플리케이션에서 상태 관리는 프로젝트의 성공적인 개발과 유지보수에 필수적입니다. 간단한 애플리케이션에서는 로컬 상태 관리로 충분하지만, 애플리케이션이 복잡해질수록 Context API나 외부 상태 관리 라이브러리를 사용하는 것이 적합합니다. 프로젝트의 요구 사항과 규모를 고려하여 적합한 상태 관리 도구를 선택하고, 이를 통해 효율적이고 확장 가능한 코드를 작성해 보세요.