React.js - Context API - 리액트 콘텍스트 에이피아이

React.js - Context API - 리액트 콘텍스트 에이피아이

---

---

1. Context API는 왜 필요한가요? (Props Drilling 문제)

React에서 컴포넌트 간에 데이터를 전달할 때 기본적으로 Props를 사용합니다. 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 내려주죠. 

그런데 문제는 컴포넌트 트리가 깊어질수록 발생합니다.

예를 들어, 할아버지 컴포넌트의 데이터를 손자 컴포넌트에게 전달하고 싶다고 가정해 봅시다. 

이 경우 데이터를 사용하지 않는 아빠 컴포넌트, 자식 컴포넌트를 중간에 거쳐 계속 Props를 전달해야 합니다.

 

할아버지 (데이터 소유)
  ↓ Props 전달
아빠 (데이터 그냥 전달)
  ↓ Props 전달
자식 (데이터 그냥 전달)
  ↓ Props 전달
손자 (데이터 사용!)

 

이렇게 데이터를 그냥 '통과'만 시키는 과정이 여러 컴포넌트를 거치는 것을 우리는 **Props Drilling (프롭스 드릴링)**이라고 부릅니다.  

마치 드릴로 구멍을 뚫듯이 여러 겹을 뚫고 지나가는 것과 같죠.

 

---

Props Drilling의 문제점:

코드 복잡성 증가: 

불필요하게 많은 컴포넌트들이 Props를 받아서 다시 내려줘야 하므로 코드가 길어지고 복잡해집니다.

유지보수 어려움: 

데이터 구조나 Props 이름이 변경되면 중간에 거치는 모든 컴포넌트를 수정해야 합니다.

재사용성 저해: 

특정 데이터를 전달하기 위해 컴포넌트 구조가 고정될 수 있어 컴포넌트 재사용이 어려워집니다.

 

---

2. Context API는 무엇인가요? (문제 해결사 등장!)

Context API는 이러한 Props Drilling 문제를 해결하기 위해 등장한 React의 내장 기능입니다.  

특정 데이터를 글로벌하게(전역적으로) 관리하고, 이 데이터가 필요한 어떤 컴포넌트에서든 직접 접근하여 사용할 수 있도록 만들어 줍니다. 

비유하자면: 

데이터를 수도 파이프 라인처럼 생각할 수 있습니다. 

Props Drilling이 각 방마다 바가지로 물을 떠다 주는 방식이라면, Context API는 주요 데이터를 위한 중앙 수도 공급원을 만들고, 원하는 방에서 바로 수도꼭지를 틀어 물(데이터)을 쓸 수 있게 해주는 방식입니다.

 

---

3. Context API의 주요 구성 요소

---

 

React.createContext(): 

Context 객체를 생성하는 함수입니다. 

이 객체는 Provider와 Consumer (또는 useContext 훅)를 포함합니다.

---

Context.Provider: 

Context의 데이터를 제공하는 역할을 합니다. 

컴포넌트 트리에서 Provider 내부에 있는 모든 하위 컴포넌트들은 Provider가 제공하는 데이터에 접근할 수 있습니다.
<MyContext.Provider value={ /* 공유할 데이터 */ }>

---

 

---

4. Context API 사용 흐름 (간단 예시)

---

1. Context 생성:

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

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

export default ThemeContext;

jsx

 

 

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;

jsx

 

 

3. useContext Hook으로 데이터 사용:

// 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;

jsx

---

---

5. Context API의 활용 사례

---

Context API는 주로 전역적으로 공유될 필요가 있는 데이터를 관리할 때 사용됩니다.

---

테마(Theme) 설정: 

다크 모드/라이트 모드와 같이 앱 전체에 적용되는 테마 정보 

---

사용자 인증 정보: 

로그인 상태, 사용자 정보 등 

---

언어 설정: 

다국어 지원을 위한 현재 언어 정보 

---

공통 설정 값: 

앱 전반에 걸쳐 사용되는 상수 값

---

---

결론

---

Context API는 React 컴포넌트 트리가 깊을 때 Props Drilling 문제를 효과적으로 해결하여 코드의 가독성과 유지보수성을 높여주는 강력한 도구입니다. 

전역적으로 공유되는 데이터를 깔끔하게 관리해야 할 때 Context API를 활용하면 좋습니다.

---