Context API

Context API는 React에서 컴포넌트 간에 데이터를 전역적으로 공유할 수 있게 해주는 기능입니다. 일반적으로 React에서는 부모에서 자식 컴포넌트로 데이터를 props로 전달하지만, Context API를 사용하면 props를 거치지 않고도 여러 컴포넌트에 쉽게 접근할 수 있는 전역 데이터를 생성할 수 있습니다. 이 기능은 트리 구조가 깊은 컴포넌트들 간에 데이터를 공유해야 할 때 특히 유용합니다.

Context API의 주요 개념과 사용법

1. Context 생성 (React.createContext):
   • createContext 함수를 사용해 새로운 Context를 만듭니다. 생성한 Context에는 기본값을 설정할 수 있습니다.

   import React, { createContext } from 'react';
   
   const ThemeContext = createContext('light'); // 기본값을 'light'로 설정

2. Provider:
   • Context의 Provider는 Context의 값을 설정하고, 그 값을 하위 컴포넌트에 전달하는 역할을 합니다.
   • Provider로 감싸진 컴포넌트들은 Context의 값을 사용할 수 있게 됩니다.

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

3. Consumer:
   • Context의 값을 직접 가져와 사용하는 Consumer를 통해 하위 컴포넌트가 Context의 데이터를 구독(subscribe)할 수 있습니다.
   • 최근에는 Consumer 대신 useContext Hook을 사용하는 것이 일반적입니다.

   function Toolbar() {
     return (
       <ThemeContext.Consumer>
         {(value) => <div>Current theme: {value}</div>}
       </ThemeContext.Consumer>
     );
   }

4. useContext Hook:
   • useContext Hook을 사용하면 Consumer 없이 Context 데이터를 쉽게 가져올 수 있습니다.
   • 함수형 컴포넌트에서 Context의 값을 사용할 때는 useContext를 권장합니다.

   import React, { useContext } from 'react';
   
   function Toolbar() {
     const theme = useContext(ThemeContext);
     return <div>Current theme: {theme}</div>;
   }

Context API의 사용 예

다음은 테마를 전역적으로 관리하는 Context API 예제입니다.

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

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

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

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

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

function ThemeButton() {
  const { theme, setTheme } = useContext(ThemeContext);

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

export default App;

코드 설명

1. Context 생성 및 Provider 설정:
   • ThemeContext를 생성하고 App 컴포넌트에서 Provider를 통해 theme와 setTheme 상태를 전역으로 제공합니다.
2. useContext로 Context 값 사용:
   • ThemeButton 컴포넌트에서 useContext Hook을 사용해 theme와 setTheme 값을 쉽게 가져옵니다.
   • setTheme 함수를 통해 theme 값을 변경하여 전역 상태를 업데이트할 수 있습니다.

Context API의 장점과 활용

• 전역 상태 관리: Context API를 사용하면 여러 컴포넌트가 동일한 데이터를 쉽게 공유하고, 데이터 변경 시 자동으로 업데이트할 수 있습니다.
• 트리구조 간단화: 중첩된 컴포넌트에서 props를 여러 단계에 걸쳐 전달할 필요가 없습니다.
• 일관성 있는 데이터 제공: 테마, 사용자 정보, 로케일 정보 등 여러 컴포넌트에서 자주 필요로 하는 데이터를 쉽게 제공할 수 있습니다.

Context API와 전역 상태 관리 라이브러리 비교

Context API는 전역 상태 관리에서 유용하지만, 상태가 복잡하거나 빈번히 업데이트되어 성능 문제가 발생할 수 있습니다. 이러한 경우에는 Redux나 MobX 같은 전역 상태 관리 라이브러리 사용이 더 적합할 수 있습니다.

Context API는 주로 상태가 비교적 단순하고 많은 컴포넌트에서 공유할 필요가 있는 경우에 활용하는 것이 효과적입니다.