Context API와 Redux 비교

---

Context API

리액트 내장 기능으로, 컴포넌트 트리 전체에 걸쳐 상태를 공유할 수 있게 한다.

Context API는 props drilling 문제를 해결할 수 있기 때문에 전역 상태를 관리하거나, 여러 컴포넌트 간에 데이터를 전달할 때 유용하다.

Context API의 주요 구성 요소

- Context

React.createContext 함수를 사용하여 새로운 Context를 생성한다.

import React from 'react';

const MyContext = React.createContext();

- Provider

Provider 컴포넌트는 Context의 값을 제공하는 역할을 한다. 이 컴포넌트를 사용하여 하위 컴포넌트들이 Context에 접근할 수 있도록 한다.

import React from 'react';
import { MyContext } from './MyContext';

const App = () => {
  const value = { user: 'John Doe' };

  return (
    <MyContext.Provider value={value}>
      <SomeComponent />
    </MyContext.Provider>
  );
};

- Consumer

Consumer 컴포넌트는 Context의 값을 읽는 역할을 한다. Consumer는 함수 컴포넌트를 사용하여 Context 값을 접근할 수 있다.

import React from 'react';
import { MyContext } from './MyContext';

const SomeComponent = () => (
  <MyContext.Consumer>
    {value => <div>User: {value.user}</div>}
  </MyContext.Consumer>
);

- useContext Hook

useContext 훅을 사용하면 클래스형 컴포넌트가 아닌 함수형 컴포넌트에서도 Context에 쉽게 접근할 수 있다.

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const SomeComponent = () => {
  const value = useContext(MyContext);
  return <div>User: {value.user}</div>;
};

Context API와 Redux 비교

1. 설치와 설정

Context API: 내장 기능으로 추가 설치 불필요, 설정이 간단
Redux: 별도 라이브러리 설치 필요, 설정이 비교적 복잡

2. 상태 관리의 복잡성

Context API: 단순한 상태 공유에 적합
Redux: 복잡한 상태 관리와 대규모 애플리케이션에 적합

3. 성능

Context API: 많은 컴포넌트가 구독할 경우 성능 문제 발생 가능
Redux: 적절한 최적화(예: connect 함수나 useSelector 훅)로 성능 관리 가능

4. 미들웨어 및 확장성

Context API: 미들웨어 지원 부족, 확장성 제한적
Redux: 미들웨어를 통해 확장성 높음, 비동기 작업 관리 용이

5. 개발자 도구

Context API: 기본적인 개발 도구
Redux: 강력한 개발 도구(예: Redux DevTools) 지원