React, Context + Consumer

App.js

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

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

export default App;

 

+ ConsumerComponent.js

// ConsumerComponent.js
import React from "react";
import { UserContext } from "./UserContext";
import { ThemeContext } from "./ThemeContext";

const ConsumerComponent = () => {
    return (
        <UserContext.Consumer>
            {({ user }) => (
                <ThemeContext.Consumer>
                    {({ theme }) => (
                        <div
                            style={{
                                border: "1px solid",
                                padding: "10px",
                                margin: "10px",
                                background:
                                    theme === "light" ? "#f9f9f9" : "#444",
                                color: theme === "light" ? "#000" : "#fff",
                            }}
                        >
                            <h2>ConsumerComponent</h2>
                            <p>사용자 이름: {user.name}</p>
                            <p>사용자 나이: {user.age}</p>
                            <p>현재 테마: {theme}</p>
                        </div>
                    )}
                </ThemeContext.Consumer>
            )}
        </UserContext.Consumer>
    );
};

export default ConsumerComponent;

 

 

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-vanzyauk?embed=1&file=src%2FApp.jsx