Context API (콘텍스트 에이피아이)

 

🟡 Context API

여러 컴포넌트에서 공통으로 사용하는 데이터를 전역으로 공유할 수 있도록 해주는 React의 내장 기능.

 

◼️ Props Drilling의 문제점

기본적으로 React는 부모에서 자식으로 props를 통해 데이터를 전달하지만, 컴포넌트 구조가 깊어질수록 불필요하게 여러 컴포넌트를 거쳐 데이터를 전달해야 하는 문제가 발생한다.

데이터를 사용하지 않는 중간 컴포넌트까지 props를 계속 전달하는 현상을 Props Drilling이라고 한다.

Context API는 이러한 Props Drilling 문제를 해결하기 위해 사용된다.

<App user={user}> (데이터 소유)
  ↓ Props 전달
<Parent user={user}> (데이터 전달)
  ↓ Props 전달
<Child user={user}> (데이터 전달)
  ↓ Props 전달
<GrandChild user={user}> (데이터 사용)

• 코드 복잡성
  • 데이터를 전달하기 위해 불필요한 props가 계속 추가된다.
• 유지보수 어려움
  • props 이름이나 구조가 변경되면 중간 컴포넌트도 함께 수정해야 한다.
• 재사용성 저해
  • 데이터 전달을 위한 구조가 고정되어 컴포넌트를 독립적으로 사용하기 어려워질 수 있다.

 

◼️ 주요 컴포넌트

🔹 createContext()

Context 객체를 생성한다.

import { createContext } from "react";

const ThemeContext = createContext();

 

🔹 Provider

Context 데이터를 Provider 내부의 모든 하위 컴포넌트에 전달한다.

<ThemeContext.Provider value={theme}>
  <App />
</ThemeContext.Provider>

• value 속성에 전달한 데이터를 하위 컴포넌트에서 사용할 수 있다.

 

🔹 useContext()

Provider가 전달한 데이터를 가져오는 Hook이다.

import { useContext } from "react";

const theme = useContext(ThemeContext);

 

◼️ 사용 순서

1️⃣ Context 생성

// src/contexts/ThemeContext.js
import React from 'react';

// ThemeContext라는 Context 객체 생성
const ThemeContext = React.createContext('light'); // 기본값 'light'

export default ThemeContext;

 

2️⃣ Provider로 데이터 전달

// App.js 또는 최상위 컴포넌트
import React, { useState } from 'react';
import ThemeContext from './contexts/ThemeContext'; // 생성한 Context 임포트
import MyComponent from './MyComponent';

function App() {
  const [theme, setTheme] = useState('light'); // 테마 상태 관리
  
  const toggleTheme = () => {
    setTheme(currentTheme => (currentTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    // ThemeContext.Provider로 하위 컴포넌트들에게 'theme' 값을 제공
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <button onClick={toggleTheme}>테마 전환</button>
      <MyComponent /> {/* 하위 컴포넌트 */}
    </ThemeContext.Provider>
  );
}

export default App;

 

3️⃣ useContext로 데이터 사용

// MyComponent.js (하위 컴포넌트)
import React, { useContext } from 'react';
import ThemeContext from './contexts/ThemeContext'; // Context 임포트

function MyComponent() {
  // useContext 훅을 사용하여 ThemeContext의 값(theme, toggleTheme)을 가져옴
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'dark' ? '#333' : '#eee', color: theme === 'dark' ? 'white' : 'black' }}>
      <h1>현재 테마: {theme}</h1>
      <p>Context API를 통해 테마 데이터를 받았습니다.</p>
      <button onClick={toggleTheme}>하위 컴포넌트에서 테마 전환</button>
    </div>
  );
}

export default MyComponent;

 

◼️ 활용 사례

• 테마(Theme): 다크 모드, 라이트 모드 등 앱 전체 테마 관리.
• 사용자(User): 로그인 여부, 사용자 정보, 토큰 관리.
• 언어(Language): 다국어 지원을 위한 언어 관리.
• 공통 설정(Settings): 앱 전체에서 사용하는 설정 값 관리.

 

 

📍 POINT 📍

✔️ Context API는 전역으로 공유해야 하는 데이터를 관리할 때 사용한다. ✔️

✔️ 모든 상태를 Context로 관리하는 것은 권장되지 않는다. ✔️

✔️ 자주 변경되는 상태가 많다면 불필요한 렌더링이 발생할 수 있다. ✔️

✔️ 복잡한 전역 상태 관리가 필요하다면 Redux, Zustand 등의 상태 관리 라이브러리를 함께 고려할 수 있다. ✔️