Redux vs Context API: React 상태 관리, 무엇을 선택할까?

React 애플리케이션을 개발할 때 상태 관리에 대한 고민은 누구나 겪는 일입니다. 특히, 전역 상태를 관리할 때 어떤 도구를 사용하는 것이 좋을지 결정하기 어려울 때가 많습니다. 오늘은 React 상태 관리의 대표적인 두 가지 방법인 Redux와 Context API에 대해 자세히 알아보고, 코드 레벨의 사용법과 주요 특징, 사용 예제, 그리고 두 방법의 차이점을 비교해 보겠습니다.

Redux란 무엇인가?

Redux는 애플리케이션의 전역 상태를 중앙 집중적으로 관리하기 위한 라이브러리입니다. React에서 널리 사용되며, 상태의 예측 가능성과 유지 보수성을 높이기 위해 설계되었습니다.

Redux 주요 특징

• 중앙 집중화된 저장소(Store): 모든 전역 상태는 하나의 스토어에서 관리되며, 앱의 어느 컴포넌트에서나 접근 가능합니다.
• 불변성 유지: 상태는 직접 변경하지 않으며, 상태를 업데이트하기 위해서는 새로운 상태를 반환하는 리듀서 함수를 사용합니다.
• 액션(Action)과 리듀서(Reducer): 상태 변경을 요청하는 액션과, 해당 요청을 처리하는 리듀서를 분리하여 애플리케이션의 구조를 명확히 합니다.
• 미들웨어: Redux Thunk, Saga 같은 미들웨어를 통해 비동기 작업 처리가 가능해집니다.

Redux 사용 방법

Redux의 기본 사용 방법을 코드로 간단히 살펴보겠습니다.

1. 설치하기

Redux를 사용하려면 redux와 react-redux를 설치해야 합니다.

npm install redux react-redux

2. 기본 구조

Redux에서는 액션, 리듀서, 그리고 스토어가 핵심 요소입니다.

• 액션: 상태 변경을 위해 어떤 일이 일어났는지 설명하는 객체입니다.
• 리듀서: 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다.
• 스토어: 애플리케이션의 모든 상태를 저장하는 객체입니다.

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

// reducer.js
const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

export default counterReducer;

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);
export default store;

3. React와 Redux 연결하기

React 컴포넌트에서 Redux 상태를 사용하기 위해서는 Provider를 통해 스토어를 공급하고, useSelector, useDispatch 훅을 사용합니다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './actions';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
}

export default App;

Context API란 무엇인가?

Context API는 React에서 기본적으로 제공하는 상태 관리 도구로, 컴포넌트 트리 전체에 걸쳐 데이터를 전파할 수 있게 해줍니다. 이를 통해 prop drilling(프로퍼티를 여러 컴포넌트에 걸쳐 전달해야 하는 문제)을 피할 수 있습니다.

Context API 주요 특징

• Provider와 Consumer: Context API는 데이터를 공급하는 Provider와 데이터를 구독하는 Consumer로 구성됩니다. 일반적으로 useContext 훅을 사용하여 데이터를 간편하게 구독할 수 있습니다.
• 간단한 전역 상태 관리: 소규모 프로젝트나 간단한 상태 공유에는 적합하지만, 상태가 복잡해질 경우 관리가 어려울 수 있습니다.

Context API 사용 방법

1. Context 생성하기

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

// Context 생성
const CountContext = createContext();

export function CountProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

export function useCount() {
  return useContext(CountContext);
}

2. Context 사용하기

// App.js
import React from 'react';
import { CountProvider, useCount } from './CountContext';

function Counter() {
  const { count, setCount } = useCount();
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
}

export default App;

Redux와 Context API 비교

특징	Redux	Context API
상태 저장소	중앙 집중형 Store	React의 내장 Context
상태 변경 방식	액션과 리듀서를 통한 불변성 유지	상태 변경 함수 (setState) 직접 호출
비동기 작업 지원	미들웨어 사용 (Redux Thunk, Saga 등)	비동기 작업을 기본적으로 지원하지 않음
규모와 복잡도	대규모 애플리케이션에 적합	소규모 애플리케이션에 적합
리렌더링 최적화	불필요한 리렌더링 방지 가능	Context 값 변경 시 하위 컴포넌트 전부 리렌더링 위험

언제 Redux를 사용해야 할까?

Redux는 대규모 애플리케이션이나 복잡한 상태 관리가 필요한 경우에 적합합니다. 예를 들어, 여러 컴포넌트에서 동일한 상태를 공유해야 하거나 비동기 작업(예: API 호출)이 많은 경우 Redux가 유리합니다. 또한, 상태 변경의 추적이 필요하거나 확장성이 중요할 때 Redux의 중앙 집중적인 관리와 불변성이 큰 도움이 됩니다.

언제 Context API를 사용해야 할까?

Context API는 간단한 전역 상태를 관리할 때 적합합니다. 상태의 복잡성이 낮고, 규모가 작은 애플리케이션에서 쉽게 설정하고 사용할 수 있습니다. 예를 들어, 사용자 인증 정보나 테마와 같이 상대적으로 변화가 적은 전역 상태를 관리하는 데 유용합니다.

결론

Redux와 Context API는 모두 장단점이 있으며, 애플리케이션의 규모와 복잡성에 따라 적절한 도구를 선택하는 것이 중요합니다. 복잡한 비동기 로직과 확장 가능한 상태 관리가 필요하다면 Redux를, 간단하고 빠르게 전역 상태를 공유하려면 Context API를 고려해보세요.

여러분의 프로젝트에 맞는 도구를 잘 선택해 효율적인 상태 관리를 구현해 보시기 바랍니다. 궁금한 점이 있다면 언제든지 질문 주세요!