React에서 Context와 Redux 비교하기

 

리액트(React)를 활용한 프로젝트에서 상태 관리는 매우 중요한 요소입니다. 상태 관리 라이브러리 중에서 가장 많이 사용되는 Redux와, 리액트 자체 기능인 Context API는 각각의 장단점과 사용 목적이 뚜렷합니다. 이번 글에서는 React Context와 Redux를 비교하여, 두 도구가 어떤 상황에 적합한지 알아보겠습니다.

1. Context와 Redux란 무엇인가?

1.1 React Context

React Context는 리액트에서 제공하는 상태 관리 도구로, 컴포넌트 간에 데이터를 간편하게 전달할 수 있도록 도와줍니다. Context를 사용하면 부모-자식 관계의 여러 단계에 걸쳐 데이터를 전달해야 하는 "prop drilling" 문제를 해결할 수 있습니다.

주요 특징:

• 리액트 내장 기능으로 별도의 설치가 필요하지 않음
• 단순한 전역 상태 관리에 적합
• Context Provider와 Consumer를 통해 데이터 공유

예제 코드:

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

const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button>{`Current theme: ${theme}`}</button>;
}

1.2 Redux

Redux는 리액트뿐만 아니라 다양한 JavaScript 애플리케이션에서 사용할 수 있는 상태 관리 라이브러리입니다. 애플리케이션의 상태를 한 곳에서 관리하며, 예측 가능한 방식으로 상태 변화를 처리합니다.

주요 특징:

• 별도의 설치 필요 (redux와 react-redux 패키지)
• 상태를 중앙에서 관리 (Store)
• 복잡한 상태 관리와 상태 변경 로직에 적합
• 액션(action)과 리듀서(reducer)를 사용한 체계적인 데이터 흐름

예제 코드:

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

// Reducer
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      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: ${count}`}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}

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

2. Context와 Redux의 주요 차이점

항목React ContextRedux

설치 여부	리액트 내장 기능 (별도 설치 불필요)	외부 라이브러리 설치 필요 (redux, react-redux)
학습 곡선	상대적으로 단순, 적은 학습 필요	체계적이지만 초기 학습이 필요
사용 목적	간단한 전역 상태 관리	복잡한 상태 관리와 체계적인 상태 흐름
상태 저장소	여러 Context Provider를 사용할 수 있음	단일 중앙 스토어
상태 변경	상태 변경 로직을 별도로 관리하지 않음	리듀서를 통한 명확한 상태 변경 로직
성능	불필요한 렌더링 발생 가능	선택적 상태 구독으로 최적화 가능

3. Context와 Redux 사용 시 고려 사항

3.1 Context가 적합한 경우

• 상태가 단순하고 전역 데이터가 많지 않을 때
• 애플리케이션이 비교적 작은 규모일 때
• 별도의 상태 관리 라이브러리를 도입하지 않고 빠르게 구현해야 할 때

예: 테마, 언어 설정, 인증 정보 등 간단한 전역 상태

3.2 Redux가 적합한 경우

• 상태가 복잡하고 여러 컴포넌트에서 공유해야 할 때
• 상태 변경 로직이 많고 체계적인 관리가 필요할 때
• 디버깅과 상태 추적이 중요한 대규모 애플리케이션일 때

예: 대규모 애플리케이션의 데이터 흐름 관리, 복잡한 폼 상태, 비동기 작업 처리

4. Context와 Redux의 성능 최적화

4.1 Context 성능 최적화

Context는 기본적으로 Provider가 렌더링될 때마다 하위 컴포넌트도 렌더링됩니다. 이를 방지하려면 다음과 같은 방법을 고려하세요:

• React.memo를 활용하여 하위 컴포넌트의 불필요한 렌더링 방지
• 상태를 분리하여 여러 Context로 나누기

4.2 Redux 성능 최적화

Redux는 구독(subscribe) 방식을 사용하므로, 필요한 상태만 구독하도록 설계할 수 있습니다:

• useSelector를 사용하여 필요한 상태만 구독
• 상태를 모듈화하여 비효율적인 데이터 흐름 방지

5. 결론

React Context와 Redux는 각각의 사용 목적과 특징이 명확합니다. 간단한 전역 상태를 관리하거나 별도의 라이브러리를 설치하고 싶지 않은 경우에는 Context를 사용하는 것이 적합합니다. 반면에 복잡한 상태와 체계적인 상태 변경 관리가 필요하다면 Redux가 더 나은 선택이 될 수 있습니다.

두 도구의 장단점을 정확히 이해하고, 프로젝트의 요구 사항에 따라 적합한 도구를 선택하는 것이 중요합니다. React Context와 Redux의 올바른 사용법을 익혀, 더 효율적이고 유지 보수 가능한 애플리케이션을 개발하시기 바랍니다!