따라서 데이터 전달은 부모 구성 요소에서 자식 구성 요소로 전달되는 한 가지 방법이지만 React 구성 요소 트리에서 데이터를 너무 깊게 전달하는 경우가 있다는 것을 배웠습니다. 예를 들어, 컴포넌트 J는 컴포넌트 A-I에서 컴포넌트 J로 해당 상태를 전달할 수 있도록 React 컴포넌트 트리의 컴포넌트 A에 있는 상태 데이터에 액세스해야 하지만 상위 컴포넌트에서 컴포넌트 중 하나를 제거하면 문제가 발생합니다. 그런 다음 구성 요소 트리를 다시 재구성해야 합니다. 그리고 여기에서 React Context가 구출됩니다. React Context는 상태 데이터 또는 모든 데이터를 래핑하는 구성 요소 트리에 전역으로 만듭니다. 전역 변수가 있는 JavaScript 파일을 상상해 보십시오. 깊게 중첩된 함수의 수에 관계없이 여전히 액세스할 수 있습니다. 그래서 오늘 포스트에서는 간단한 예제를 통해 React 컨텍스트를 설정하는 방법을 알려드릴 것입니다. 여기에서 간단하든 복잡하든 응용 프로그램에서 사용할 수 있습니다.

1. 폴더 생성 및 react 설치

// type following commands in CLI
mkdir react-context
cd react-context
npm create-react-app client
cd client
code .
npm start

2. 폴더 구조 및 컨텍스트 파일 생성

모든 컨텍스트는 컨텍스트 폴더에 있으므로 이 폴더를 만든 것입니다.

src/
   context/
      ThemeContext.js
   App.js
   index.js

3. ThemeContext 파일을 열고 다음 코드를 붙여넣습니다.

import React, { useState } from "react";

/**
1. We create context with React.createContext({defaultValue})
2. We store created context in the variable
3. We export the context so that any component in component tree that context wraps can access it's data by the context variable
*/
export const ThemeContext = React.createContext({ themeMode: "light" });

const ThemeContextProvider = ({ children }) => {
  const [themeMode, setThemeMode] = useState("light");
  const toggleThemeMode = () => {
    if (themeMode === "light") {
      setThemeMode("dark");
    } else {
      setThemeMode("light");
    }
  };
/**

1. Context has Provider also Consumer but here it Provides data in the value attribute to component tree that it wraps.
2. Here we are sharing toggleTheemMode function that changes themeMode state from light to dark and vice versa. And themeMode with component tree
3. Children that Context wraps is component tree that ThemeContextProvider wraps and makes toggleThemeMode and themeMode available to them
*/
  return (
    <ThemeContext.Provider value={{ toggleThemeMode, themeMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeContextProvider;

4. index.js를 열고 다음 코드를 붙여넣습니다.

import React from "react";
import ReactDOM from "react-dom/client";
import ThemeContextProvider from "./ThemeContext";
import "./index.css";
import App from "./App";
/**
1. We've imported ThemeContextProvider function from ThemeContext
2. In here we're wrapping App root component and which is assigned to children prop and passed as argument to ThemeContextProvider function 
3. As App is the root component, all the components regardless of the the level they are in the component tree, they can access the data ThemeContextProvider is providing
*/
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ThemeContextProvider>
    <App />
  </ThemeContextProvider>
);

5. 앱 파일을 열고 다음 코드를 붙여넣습니다.

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

const App = () => {
  const { themeMode, toggleThemeMode } = useContext(ThemeContext);

/**
1. We've imported the context ThemeContext that we'r created which makes global data available to use
2. We've also imported useContext hook to which we pass ThemeContext context and it returns use data that we've provided in that ThemeContext.Provider' value attribute
3. We've destructured themeMode and toggleThemeMode properties to use in this component
4. Based on themeMode value we're changing the background theme of the app
5. When button is clicked, we're calling toggleThemeMode which changes themeMode to light to dark or vice versa
*/
  return (
    <div
      style={
        themeMode === "light"
          ? { background: "#fff", height: "100vh" }
          : { background: "#000", color: "#fff", height: "100vh" }
      }
    >
      <button onClick={toggleThemeMode}>
        {themeMode === "light" ? "Dark Mode" : "Light Mode"}
      </button>
    </div>
  );
};

export default App;