[React .hook] How to use useContext ?

Before we start

 

바로전에 useContext가 뭔지 Context API가 무엇인지 자세하게 기술해 놓았다.

 

useContext 사용이 처음이라면

 

해당 게시글을 완독하고 오기를 추천한다.

 

2024.02.19 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useContext ?

[React .hook] What is useContext ?

 

So how to use useContext ?

 

 

이렇게 React 프로젝트를 생성했다고 가정했을 때

 

//App.js

import { useState } from 'react';
import './App.css';
import Page from './components/Page';
import { ThemeContext } from './context/TehmeContext';

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

 

//ThemeContext.js

import { createContext } from 'react';

export const ThemeContext = createContext(null);

 

여기서 createContext(null) null이 들어가는 이유는

 

우리는 App 컴포넌트에서 isDark, setIsDark Props를 보내므로

 

따로 초기화 하지 않아도 된다.

 

//Page.jsx

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

const Page = () => {
    const data = useContext(ThemeContext);
    console.log('data: ', data);

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

 

위의 코드에서 콘솔창에 아래와 같이 나타난다.

 

isDark, setIsDark 가 전달 및 출력되었다.

 

//Header.jsx

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


const Header = () => {
    const { isDark } = useContext(ThemeContext);
    console.log(isDark);

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

export default Header;

 

위의 콘솔도 출력하면

 

false가 나올것이다.

 

//Content.jsx

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


const Content = () => {
    const { isDark } = useContext(ThemeContext);
    console.log(isDark);

    return(
    	<div
            className="Content"
            style={{
            	backgroundColor: isDark ? 'black' : 'lightgray',
                color: isDark ? 'white' : 'black',
            }}
        >
            <h1>홍길동님, 좋은 하루 되세요</h1>
        </div>
    );
};

export default Content;

 

//Footer.jsx

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',
                color: isDark ? 'white' : 'black',
            }}
        >
            <button className="button" onClick={toggleTheme}>
            	Dark Mode
            </button>
        </footer>
    );
};

export default Footer;

이 글을 마치며...

 

해당 글은 아래의  별코딩 유튜버님의 영상을 참고하여 제작하였습니다.

* 해당 저작물 관련하여 개인적으로 posting permission 받았습니다.

https://www.youtube.com/watch?v=LwvXVEHS638