useContext

유석현(SeokHyun Yu)·2022년 11월 22일
0

React

목록 보기
14/21
post-thumbnail

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import "./App.css";
import AppTheme from "./AppTheme";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <AppTheme />
    </React.StrictMode>
);

AppTheme.jsx

import React from "react";
import { useContext } from "react";
import { DarkModeComponent, darkModeContext } from "./DarkModeContext";
import "./AppTheme.css";

export default function AppTheme() {
    return (
        <DarkModeComponent>
            <Header />
            <Main />
            <Footer />
        </DarkModeComponent>
    );
}

function Header() {
    return <header className="header">Header</header>;
}

function Main() {
    return (
        <main className="main">
            Main
            <Profile />
            <Products />
        </main>
    );
}

function Profile() {
    return (
        <div>
            Profile
            <User />
        </div>
    );
}

function User() {
    return <div>User</div>;
}

function Products() {
    return (
        <div>
            Products
            <ProductDetail />
        </div>
    );
}

function ProductDetail() {
    const { darkMode, handleDarkMode } = useContext(darkModeContext);
    return (
        <div>
            Product Detail, {darkMode ? "true" : "false"}
            <button onClick={handleDarkMode}>toggle</button>
        </div>
    );
}

function Footer() {
    return <footer className="footer">Footer</footer>;
}

DarkModeContext.jsx

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

export const darkModeContext = createContext();

export function DarkModeComponent({ children }) {
    const [darkMode, setDarkMode] = useState(false);
    const handleDarkMode = () => {
        setDarkMode((prev) => !prev);
    };

    return (
        <>
            <darkModeContext.Provider value={{ darkMode, handleDarkMode }}>
                {children}
            </darkModeContext.Provider>
        </>
    );
}

View


profile
Backend Engineer

0개의 댓글