React Context

1. React Context API

React에서 컴포넌트 트리를 통해 데이터를 전역적으로 공유하기 위해 사용하는 기능이다. 이를 통해 부모, 자식 관계의 중간 컴포넌트들을 거치지 않고 데이터를 직접 전달할 수 있다. Props-Drilling을 피할 수 있다. Context API는 상태 관리가 필요한 경우 Redux와 같은 외부 라이브러리를 대체할 수 있는 간단한 방법으로 사용이 된다.

 

2. 주요 개념

2-1. Context 생성(React.createContext)

• Context는 React.createContext 메서드를 호출하여 생성된다.
• 생성된 Context에는 Provider와 Consumer라는 두 가지 중요 컴포넌트가 포함되어 있다.

const MyContext = React.createContext();

 

2-2. Provider

• Provider는 Context에서 데이터를 제공하는 역할을 한다.
• value prop을 통해 하위 컴포넌트에 전달할 데이터를 정의한다.
• 컴포넌트 트리에서 Provider 아래에 모든 컴포넌트는 이 데이터를 사용할 수 있다.

<MyContext.Provider value={value}>
  {children}
</MyContext.Provider>

 

2-3. Consumer

• Consumer는 Context에서 제공된 데이터를 사용하는 컴포넌트이다.
• Consumer 내부에서 렌더링 함수가 필요하며, 이 함수는 value를 인자로 받아 데이터를 처리한다.

<MyContext.Consumer>
  {(value) => <div>{value}</div>}
</MyContext.Consumer>

 

2-4. useContext Hook

• React 16.8에서 추가된 useContext Hook은 Cusmer 없이도 Context 데이터를 쉽게 사용할 수 있도록 한다.
• 함수형 컴포넌트에서 Context를 사용하는 경우 가장 많이 사용된다.

const value = useContext(MyContext);

 

 

3. Context API 사용 사례

3-1. 전역 상태 관리

• 사용자 인증 정보(예, 로그인 상태, 사용자 정보)
• 테마 설정(예, 다크모드/라이트 모드)
• 다국어 지원(예, 선택된 언어 / 번역)

3-2. Prop Drilling 방지

• 깊은 컴포넌트 트리 구조에서 특정 데이터를 하위 컴포넌트에 전달할 때 중간 컴포넌트를 통해 데이터를 전달하지 않아도 된다.

 

4. Context API 의 장점

1. 외부 상태 관리 라이브러리(예, Redux, MobX) 없이 전역 상태를 쉽게 관리 가능

2. Prop Drilling 을 제거하여 코드 가독성 및 유지 보수성 향상

3. React 에 내장된 기능으로 추가적인 설치나 설정 불필요

 

5. Context API의 단점

5-1. 재렌더링 문제

• Context의 value가 변경되면 Provider 하위의 모든 컴포넌트가 다시 렌더링된다.
• 이는 불필요한 렌더링을 유발할 수 있어, 최적화를 위해 React.memo나 상태 분리를 고려해야한다.

5-2. 규모가 큰 프로젝트의 경우 복잡

• 여러 개의 Context를 사용하면 코드가 복잡해질 수 있으므로 필요한 경우에만 사용해야 한다.

 

6. 예제 코드

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

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

const App = () => {
  const [theme, setTheme] = useState('light');

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

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

const ThemedButton = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button
      style={{
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
    >
      Toggle Theme
    </button>
  );
};

export default App;