Context API란

 

 

 

React의 Context API는 컴포넌트 트리 안에서 데이터를 전역적으로 공유할 수 있는 방법을 제공한다

이 API를 사용하면, prop 드릴링(prop drilling) 없이도 컴포넌트 트리의 깊은 곳에 있는 컴포넌트에 데이터를 전달할 수 있다

즉, 중첩된 컴포넌트 구조에서 상위 컴포넌트로부터 직접적으로 데이터를 받지 않고도, Context를 통해 필요한 데이터에 접근할 수 있게 해준다

Context API는 주로 애플리케이션의 전역 상태를 관리하기 위해 사용되며, 테마, 로컬라이제이션, 사용자 인증 정보 등 애플리케이션 전반에 걸쳐 공유되어야 하는 데이터를 관리하는 데 유용하다

 

Context API 사용 방법

Context 생성

• React.createContext를 호출하여 Context를 생성
• 함수는 Provider와 Consumer 컴포넌트를 포함하는 Context 객체를 반환

const MyContext = React.createContext(defaultValue);

 

Provider 사용

• Context 객체의 Provider 컴포넌트를 사용하여 하위 컴포넌트에 데이터를 전달
• Provider는 value prop을 받아서, 이 값을 하위 컴포넌트에게 전달

<MyContext.Provider value={/* 어떤 값 */}>
  {/* 하위 컴포넌트들 */}
</MyContext.Provider>

 

데이터 사용

하위 컴포넌트에서는 useContext 훅 또는 Consumer 컴포넌트를 사용하여 Context의 데이터에 접근 가능

useContext 훅 사용 (함수형 컴포넌트):

const value = useContext(MyContext);

Consumer 컴포넌트 사용 (클래스 및 함수형 컴포넌트):

<MyContext.Consumer>
  {value => /* 컨텍스트 값을 사용하는 렌더링 */}
</MyContext.Consumer>

 

예제

import React, { useContext } from 'react';

// Context 생성
const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  // useContext 훅을 사용하여 현재 테마 값에 접근
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

 

이 예제에서는 ThemeContext를 사용하여 애플리케이션의 테마 정보를 App 컴포넌트로부터 ThemedButton 컴포넌트까지 전달하고 있다

ThemedButton은 useContext 훅을 통해 현재 테마 값을 받아와서 사용한다

Context API를 사용함으로써, 컴포넌트 구조가 복잡해지더라도 쉽고 효율적으로 데이터를 공유하고 관리할 수 있다