(번역) Redux vs Context API: 언제 사용해야 할까

핵심 요약

Context API
    - React에 내장된 상태 관리 도구로 추가 설치 불필요.
    - Prop Drilling 문제를 해결하는 간단한 방법.
    - 자주 변경되지 않는 상태(예: 테마, 언어 설정)에 적합.
    - 소규모 애플리케이션 또는 특정 데이터 공유에 적합.

Redux
    - 중앙 집중식 상태 관리를 위한 강력한 도구.
    - 복잡하고 대규모 애플리케이션에서 상태 관리에 적합.
    - 강력한 디버깅 툴(DevTools) 제공.
    - 별도 설치 및 설정 필요.

주요 비교
    - Context API는 단순성과 React 기본 내장이라는 장점.
    - Redux는 확장성과 예측 가능한 상태 관리에 초점.

결론
    - Context API는 소규모 프로젝트에서 Prop Drilling 문제를 해결하는 데 이상적.
    - Redux는 대규모 프로젝트와 복잡한 상태 관리가 필요한 경우 적합.

 

---

 

React 애플리케이션에서 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 때, 일반적으로 props를 사용합니다.

그러나 깊이 중첩된 자식 컴포넌트가 상위 컴포넌트의 데이터를 필요로 할 경우, 모든 중간 컴포넌트가 해당 데이터를 props로 전달해야 하는 'prop drilling' 문제가 발생합니다.

이러한 문제를 해결하기 위해 Context API와 Redux와 같은 상태 관리 솔루션이 존재합니다.

그렇다면 어떤 상황에서 이 두 가지 중 어떤 것을 선택해야 할까요?

 

Context API란 무엇인가?

React 공식 문서에 따르면:

일반적인 React 애플리케이션에서 데이터는 props를 통해 상위에서 하위로 전달됩니다. 그러나 많은 컴포넌트에서 필요로 하는 데이터(예: 로케일 설정, UI 테마)를 위해 이러한 방식은 번거로울 수 있습니다. Context는 이러한 값을 컴포넌트 트리 전체에서 명시적으로 props를 전달하지 않고도 공유할 수 있는 방법을 제공합니다.

 

Context API는 React에 내장된 도구로, 추가적인 번들 크기 증가 없이 사용할 수 있습니다.

Context API 사용 방법:

    1. Context 생성:

const Context = createContext(초기값);

 

    2. Provider 생성:

const Parent = () => {
  return (
    <Context.Provider value={초기값}>
      <Children />
    </Context.Provider>
  );
};

 

    3. Context 데이터 소비:

const Child = () => {
  const contextData = useContext(Context);
  // 데이터를 활용
  // ...
};

 

Redux란 무엇인가?

Redux 공식 문서에 따르면:

Redux는 JavaScript 앱을 위한 예측 가능한 상태 컨테이너입니다. 이는 애플리케이션이 일관되게 동작하고, 다양한 환경(클라이언트, 서버, 네이티브)에서 실행되며, 테스트하기 쉽게 만듭니다. 또한, 라이브 코드 편집과 시간 여행 디버거와 같은 훌륭한 개발자 경험을 제공합니다. Redux는 React와 함께 또는 다른 뷰 라이브러리와 함께 사용할 수 있습니다. 작지만(2kB, 의존성 포함) 다양한 애드온 생태계를 가지고 있습니다.

 

Redux는 중앙 집중식 스토어와 이를 수정하기 위한 액션을 제공하는 오픈 소스 라이브러리입니다.

JavaScript 또는 TypeScript를 사용하는 모든 프로젝트에서 사용할 수 있지만, 여기서는 React 기반 애플리케이션에 초점을 맞추겠습니다.

Redux 사용 방법:

    1. 리듀서 생성:

import { createSlice } from "@reduxjs/toolkit";

export const slice = createSlice({
  name: "slice-name",
  initialState: {
    // 초기 상태
  },
  reducers: {
    func01: (state) => {
      // 상태 변경 로직
    },
  },
});

export const { func01 } = slice.actions;
export default slice.reducer;

 

    2. 스토어 구성:

import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducer";

export default configureStore({
  reducer: {
    reducer: reducer,
  },
});

 

    3. 스토어를 애플리케이션에 제공:

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

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

 

    4. 상태 사용 또는 액션 디스패치:

import { useSelector, useDispatch } from 'react-redux';
import { func01 } from './redux/reducer';

const Component = () => {
  const reducerState = useSelector((state) => state.reducer);
  const dispatch = useDispatch();
  const doSomething = () => dispatch(func01());
  return (
    <>
      {/* 컴포넌트 내용 */}
    </>
  );
};
export default Component;

 

Redux와 Context API 비교

특성	Context API	Redux
내장 여부	React에 내장되어 있으며, 추가 설치 불필요	별도의 설치 필요, 번들 크기 증가 가능
설정 복잡도	최소한의 설정으로 사용 가능	React 애플리케이션에 통합하기 위해 복잡한 설정 필요
데이터 유형	자주 갱신되지 않는 정적 데이터에 적합	정적 및 동적 데이터 모두에 효과적
확장성	새로운 컨텍스트 추가 시 처음부터 생성 필요	초기 설정 후 새로운 데이터/액션 추가가 용이
디버깅 용이성	깊이 중첩된 컴포넌트 구조에서는 디버깅이 어려울 수 있음	강력한 Redux DevTools를 통해 디버깅이 용이
코드 구조	UI 로직과 상태 관리 로직이 동일한 컴포넌트에 존재	UI 로직과 상태 관리 로직이 분리되어 코드 구조가 더 명확함

 

위 비교표를 통해, 일반적으로 Redux는 대규모 프로젝트에, Context API는 소규모 프로젝트에 적합하다는 의견이 나옵니다.

Redux는 부모에서 자식으로 데이터를 전달하기 위해 사용하기에는 과도할 수 있으며, Context API는 이 경우에 더 적합합니다.

 

 

 

출처: https://dev.to/ruppysuppy/redux-vs-context-api-when-to-use-them-4k3p