React-Context

React Context:

컴포넌트 트리 전체에서 데이터를 공유할 수 있도록하는 기능
'createContext' 메서드로 함수 컨텍스트를 생성하고
'Provider' 컴포넌트를 사용하여 값을 전달한다.
'useContext'훅을 사용하여 컨텍스트 값을 받아온다.

(실습내용)
테마를 바꿔주는 값을 context에 저장하고 테마를 바꿔주는 객체를 전달하는 코드를 만들어보겠다. 이 때 값을 객체로 전달을 해주는 것이 포인트이다.

1) createContext로 컨텍스트를 만들어준다.

import React from "react";

const ThemeContext = React.createContext();
ThemeContext.displayName = "ThemeContext"

export default ThemeContext; 

2) 화면을 그려주는 메인컴포넌트를 만든다.
useContext 훅을 사용하여 컨텍스트의 값도 받아오는 부분이다.
유저와 인터렉션이 일어나는 부분으로 html와 이벤트가 발생하는 부분이다.

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

const MainContext = (props) => {
    const value =useContext(ThemeContext);
    const {theme, toggleTheme} = value; 
    //value는 객체이다. 
    
    return (
        <div style={{
            width:"100vw",
            height: "100vh",
            padding: "1.5rem",
            backgroundColor: theme ==="light"? "yellow" : "black",
            color: theme === "light"? "black" : "white",
        }}>

            <p>안녕하세요. 테마 변경이 가능한 웹사이트입니다</p>
            <button onClick={toggleTheme}>테마 변경</button>
        </div>
    );
};

export default MainContext;

3) value의 값인 theme 과 toggleTheme의 값을 할당해주고 consumer 컴포넌트들에게 배포하기 위한 provider 컴포넌트를 만든다.

import React, { useCallback , useState} from 'react';
import MainContext from './MainContext';
import ThemeContext from './ThemeContext';


const DarkOrLight = (props) => {
    const [theme, setTheme] = useState("light")

    const toggleTheme = useCallback(()=>{
        if(theme==="light"){
            setTheme("dark")
        } else if (theme ==="dark"){
            setTheme("light")
        }
    },[theme])

    const value = {theme, toggleTheme}
    return (
        
            <ThemeContext.Provider value={value}>
            <MainContext />
            </ThemeContext.Provider>
       
    );
}

export default DarkOrLight;