React, Context - 복수 사용하기

App.js

import React from "react";
import { UserProvider } from "./UserContext";
import { ThemeProvider } from "./ThemeContext";
import MainComponent from "./MainComponent";

// App 컴포넌트
// 여러 Context Provider를 중첩하여 사용
const App = () => {
    return (
        <UserProvider>
            <ThemeProvider>
                <MainComponent />
            </ThemeProvider>
        </UserProvider>
    );
};

export default App;

 

UserContext.js

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

// 사용자 정보 관리를 위한 Context
export const UserContext = createContext();

export const UserProvider = ({ children }) => {
    const [user, setUser] = useState({ name: "홍길동", age: 25 });

    return (
        <UserContext.Provider value={{ user, setUser }}>
            {children}
        </UserContext.Provider>
    );
};

 

ThemeContext.js

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

// 테마 정보 관리를 위한 Context
export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState("light");

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

 

MainComponent.js

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

const MainComponent = () => {
    const { user, setUser } = useContext(UserContext); // UserContext 사용
    const { theme, setTheme } = useContext(ThemeContext); // ThemeContext 사용

    return (
        <div style={{
                background: theme === "light" ? "#fff" : "#333",
                color: theme === "light" ? "#000" : "#fff",
            }}
        >
            <h1>안녕하세요, {user.name}님!</h1>
            <p>현재 나이: {user.age}</p>
            <button onClick={() => setUser({ name: "김영희", age: 30 })}>
                사용자 변경
            </button>
            <br />
            <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
                테마 변경 (현재: {theme})
            </button>
        </div>
    );
};

export default MainComponent;

 

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