[리액트 9] Context API

물론입니다. React의 Context API는 애플리케이션의 여러 컴포넌트에 걸쳐 데이터를 공유하는 데 유용한 도구입니다. Context API를 사용하면 props를 통해 데이터를 명시적으로 전달하는 대신, 컴포넌트 트리를 통해 데이터를 직접 전달할 수 있습니다. 이는 특히 중첩된 컴포넌트 구조에서 매우 유용합니다.

Context API의 기본 사용법은 다음과 같습니다:
1. Context 생성: `React.createContext()`를 사용하여 Context를 생성합니다.
2. Provider 사용: 생성된 Context의 `Provider` 컴포넌트를 사용하여 하위 컴포넌트에 데이터를 제공합니다.
3. Consumer 사용: Context의 데이터를 사용할 컴포넌트에서 `Context.Consumer`를 사용하거나 `useContext` 훅을 사용하여 데이터에 접근합니다.

간단한 예시로, 사용자의 현재 테마 정보를 전역적으로 공유하는 Context를 만들어 보겠습니다.

1. Context 생성

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

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

   // Theme Provider 정의
   export const ThemeProvider = ({ children }) => {
     const [theme, setTheme] = useState('light');

     // 테마를 변경하는 함수
     const toggleTheme = () => {
       setTheme(theme === 'light' ? 'dark' : 'light');
     };

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

2. Provider를 사용하여 애플리케이션에 Context 제공

 import React from 'react';
   import { ThemeProvider } from './ThemeContext';
   import App from './App';

   const Root = () => {
     return (
       <ThemeProvider>
         <App />
       </ThemeProvider>
     );
   };

   export default Root;

3. Consumer 사용하여 Context 데이터 접근

   import React, { useContext } from 'react';
   import { ThemeContext } from './ThemeContext';

   const MyComponent = () => {
     const { theme, toggleTheme } = useContext(ThemeContext);

     return (
       <div>
         현재 테마: {theme}
         <button onClick={toggleTheme}>테마 변경</button>
       </div>
     );
   };

   export default MyComponent;

이 예시에서는 `ThemeContext`를 사용하여 애플리케이션의 모든 컴포넌트에서 현재 테마(`theme`)를 접근하고, 테마를 변경할 수 있는 함수(`toggleTheme`)를 제공합니다. 이렇게 하면 각 컴포넌트에서 별도의 props 전달 없이도 테마 관련 데이터를 사용할 수 있습니다.