useContext

• 컴포넌트에서 Context를 읽고 구독할 수 있는 React Hook
• useContext는 전달한 Context에 대한 Context Value를 반환
• Context를 전달하려면 해당 컴포넌트 또는 상위 컴포넌트 중 하나를 해당 Context Provider로 감싸기
• useContext()는 항상 호출하는 컴포넌트 상위에서 가장 가까운 Provider를 찾음
• Context 값을 결정하기 위해 React는 컴포넌트 트리를 탐색하고 특정 Context에 대해 상위에서 가장 가까운 Context Provider를 찾음

useContext를 사용하지 않으면

import { useRef, useEffect, useState } from 'react';
import Page from './Component/Page';

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <Page isDark={isDark} setIsDark={setIsDark} />
  )
};

export default App;

import React from "react";
import Header from "./Header";
import Content from "./Content";
import Footer from "./Footer";

const Page = ({ isDark, setIsDark} ) => {
    // 사실상 props를 사용하고 있지 않지만, 하위의 컴포넌트에게 전달만 함
    return(
        <div className="page">
            <Header isDark={isDark}></Header>
            <Content isDark={isDark}></Content>
            <Footer isDark={isDark} setIsDark={setIsDark}></Footer>
        </div>
    )
};

export default Page;

import React from "react";

const Header = ({ isDark }) => {
    return(
        <header className="header" style={{
            backgroundColor : isDark ? 'black' : 'lightgray',
            color : isDark ? 'white' : 'black'
        }}>
            <h1>Welcome</h1>
        </header>
    )
};

export default Header;

import React from "react";

const Content = ({ isDark }) => {
    return(
        <div className="content" style={{
            backgroundColor: isDark ? 'black' : 'white',
            color: isDark ? 'white' : 'black'
        }}>
            <p>손님, 좋은 하루에요</p>
        </div>
    )
};

export default Content;

import React from "react";

const Footer = ({ isDark, setIsDark }) => {
    const toggleTheme = () => {
        setIsDark(!isDark);
    };

    return(
        <footer className="footer" style={{
            backgroundColor: isDark ? 'black' : 'lightgray'
        }}>
            <button className="button" onClick={toggleTheme}>
                Dark Mode
            </button>
        </footer>
    )
};

export default Footer;

useContext를 사용하면

import { createContext } from "react";

export const ThemeContext = createContext(null);

import { createContext } from "react";

export const UserContext = createContext(null);

import { useRef, useEffect, useState } from 'react';
import Page from './Component/Page';
import { ThemeContext } from './context/ThemeContext';
import { UserContext } from './context/UserContext';

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <UserContext.Provider value={"사용자"}>
      <ThemeContext.Provider value={{isDark, setIsDark}}>
        <Page />
      </ThemeContext.Provider>
    </UserContext.Provider>    
  )
};

export default App;

import React, { useContext } from "react";
import { ThemeContext } from "../context/ThemeContext";
import Header from "./Header";
import Content from "./Content";
import Footer from "./Footer";

const Page = () => {
    return(
        <div className="page">
            <Header />
            <Content />
            <Footer />
        </div>
    )
};

export default Page;

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

const Header = () => {
    const data = useContext(ThemeContext);
    const user = useContext(UserContext);

    return(
        <header className="header" style={{
            backgroundColor : data.isDark ? 'black' : 'lightgray',
            color : data.isDark ? 'white' : 'black'
        }}>
            <h1>Welcome {user}</h1>
        </header>
    )
};

export default Header;

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

const Content = () => {
    const { isDark } = useContext(ThemeContext);
    const user = useContext(UserContext);

    return(
        <div className="content" style={{
            backgroundColor: isDark ? 'black' : 'white',
            color: isDark ? 'white' : 'black'
        }}>
            <p>{user}, 좋은 하루에요</p>
        </div>
    )
};

export default Content;

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

const Footer = () => {
    const { isDark, setIsDark } = useContext(ThemeContext);

    const toggleTheme = () => {
        setIsDark(!isDark);
    };

    return(
        <footer className="footer" style={{
            backgroundColor: isDark ? 'black' : 'lightgray'
        }}>
            <button className="button" onClick={toggleTheme}>
                Dark Mode
            </button>
        </footer>
    )
};

export default Footer;