useContext (dark mode 적용)

언제 사용할까?

react 는 상위 컴포넌트에서 하위 컴포넌트로 prop을 전달해서 데이터를 전달한다.

 

예를들어) 최상위 컴포넌트에서 3단계 아래의 컴포넌트에 데이터를 전달하려면?

=>1,2단계 에 있는 컴포넌트는 해당 데이터가 필요없더라도 이를 받아서 3단계 컴포넌트까지 밑으로 전달해야한다.

 

이때, context를 사용하면 최상위에서 바로 3단계 아래로 전달해줄 수 있다.

즉, 전역적으로 사용해야하는 데이터를 전달할 때 사용하면 좋다.

 

예시)

페이지에서 dark mode 버튼을 클릭할 경우 Dark 모드를 적용하는 동작하도록 구현.

우선 Context를 사용하지 않고 구현한 후, Context를 사용하여 구현한 코드와 비교하려고 한다.

 

dark mode 적용 페이지 동작

 

Component 구조

 

- Context 적용 전 Code

App  =>  Page  : props로 isDark, setIsDark 전달

Page => Header : isDark 전달

Page => Content : isDark 전달

Page => Footer : props로 isDark, setIsDark 전달

 

이 경우 Page에서는 직접 사용하지 않는 2개의 props 를 전달 받아야 하는 상황이다.

 

<App.jsx>

import React from "react";
import "./App.css";
import Page from "./Components/ChapterContext/Page";

//최상위 Component
function App() {
  const [isDark,setIsDark] = useState(false);
  
  return <Page isDark={isDark} setIsDark{serIsDark}/>
 }
 
 export default App;

 

 

<Page.jsx>

import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import Content from "./CenterContenet";
function Page({isDark,setIsDark}){
    return(
        <div className="page">
            <Header isDark={isDark}></Header>
            <Content isDark={isDark}></Content>
            <Footer isDark={isDark} setIsDark={setIsDark}></Footer>
        </div>
    );
}

export default Page;

 

- Context 를 사용한 Code

Context 사용법

1. context를 만든다. (.js 파일로)

import { createContext } from "react";

export const ThemeContext = createContext(null);

 

2.(상위 컴포넌트) App 에서 <ContextName.provider value=데이터/> 로 (하위 컴포넌트) Page를 감싸는 경우 value에 들어간 데이터는 Page 하위의 모든 컴포넌트에서 사용할 수 있다. 

 

이렇게 우선 Page 에서는 이제 필요하지 않았던, isDark, setIsDark Props를 받지 않아도 된다.

import React from "react";
import "./App.css";
import Page from "./Components/ChapterContext/Page";
import { ThemeContext } from "./Components/context/ThemeContext";

//최상위 Component
function App() {
  const [isDark,setIsDark] = useState(false);
  
  return(
   <ThemeContext.Provider value={{isDark,setIsDark}}>
   	<Page />
   </ThemeContext.Provider>
  ) ;       
}
 
 export default App;

 

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

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

export default Page;

 

 

3. 하위 component에서 useContext(contextName) 으로 설정 데이터를 꺼내서 쓴다.

 

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

 

<Header.jsx>

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

function Header(){
    const {isDark} = useContext(ThemeContext);

    return(
        <header className="header"
        style={{
            backgroundColor: isDark? 'black' : 'lightgray',
            color: isDark?'white':'black'
        }}>
            <h1>welcome 홍길동</h1>
        </header>
    )
}

export default Header;

 

<Content.jsx>

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

function Content(){
    const {isDark} = useContext(ThemeContext);
    return(
        <div className="content"        
        style={{
            backgroundColor: isDark? 'black' : 'white',
            color: isDark?'white':'black'
        }}>
            안녕하세요 반갑습니다.
        </div>
    );
}

export default CenterContent

 

<Footer.jsx>

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

function Footer(){
    const {isDark,setDark} = useContext(ThemeContext);
    const darkMode = () =>{
        setDark(!isDark);
    }
    return(
        <footer className="footer" 
        style={{
            backgroundColor: isDark? 'black' : 'lightgray',
        }}>
            <button className="button" onClick={darkMode}>
                dark mode
            </button>
        </footer>

    )
}

export default Footer;