React, Context

App.js

// App.js
import React, { createContext, useState } from "react";
import ChildComponent from "./components/ChildComponent";

// Context 생성, 데이터를 전역적으로 관리하기 위한 Context 객체를 생성합니다.
export const MyContext = createContext();

// Context Provider 컴포넌트 정의, 하위 컴포넌트들에게 데이터를 전달합니다.
const MyProvider = ({ children }) => {
    const [value, setValue] = useState("안녕하세요!"); // 상태값 관리
    return (
        <MyContext.Provider value={{ value, setValue }}>
            {children}
        </MyContext.Provider>
    );
};

const App = () => {
    return (
        <MyProvider>
            <ChildComponent />
        </MyProvider>
    );
};

export default App;

 

ChildComponent.js

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

const ChildComponent = () => {
    // Context 값 사용, 부모에서 전달된 데이터를 가져옵니다.
    const { value, setValue } = useContext(MyContext);
    return (
        <div>
            <p>{value}</p>
            <button onClick={() => setValue("React Context를 배워보세요!")}>클릭하여 값 변경</button>
        </div>
    );
};

export default ChildComponent;

 

https://stackblitz.com/edit/vitejs-vite-uklbcuwc?embed=1&file=src%2FApp.jsx