14. context

-context?

리액트 컴포넌트들 사이에서 데이터를 기존의 프롭을 통해 전달하는 방식 대신 컴포넌트 트리를 통해 곧바로 전달하는 새로운 방식.

ex)로그인 여부, 정보, UI테마, 현재 언어 등등

function App(props){
	return <Toolbar theme="dark" />;
}

function Toolbar(props){
	//이 컴포넌트는 ThemedBytton에 theme를 넘겨주기 위해서 'theme' prop을 가져야만 한다.
    //현재 테마를 알아야 하는 모든 버튼에 대해서 props로 전달하는 것은 괸장히 비효율적이다.
    return (
    	<div>
        	<ThemedButton theme={props.theme}/>
        </div>
    );
}

function ThemedButton(props) {
	return <Button theme={props.theme} />;
}

예시 - context 사용을 안한 상태

 

const ThemeContext = React.createContext('light');

function App(props){
	return (
    	<ThemeContext.Provider theme="dark">
        	<Toolbar />
        </ThemeContext.Provider>
    );
}

function Toolbar(props){
	//이 컴포넌트는 ThemedBytton에 theme를 넘겨주기 위해서 'theme' prop을 가져야만 한다.
    //현재 테마를 알아야 하는 모든 버튼에 대해서 props로 전달하는 것은 괸장히 비효율적이다.
    return (
    	<div>
        	<ThemedButton />
        </div>
    );
}

function ThemedButton(props) {
	return (
    	<ThemeContext.Consumer>
        	{value => <Button theme={value} />}
        </ThemeContext.Consumer>
    );
}

예시-context 사용 한 상태

 

-컴포넌트와 context가 연동되면 재사용성이 떨어지기 때문에 무조건 써야 하는 건 아니다.

 

-주의점

provider 컴포넌트가 재렌더링 될 때마다 모든 하위 consumer 컴포넌트가 재렌더링 되기 때문에 {something: 'something'}같은 식으로 값을 직접 넣는게 아닌 const[예시,set예시]=useState(예시)식으 state에 저장해서 해당 state를 넣어주야 한다.

 

 -여러개의 context 사용하려면 provider를 중첩해서 사용한다.

const ExContext1 = React.createContext('예시');
const ExContext2 = React.createContext({name:'예시'});

function App(props){
...
	return (
    	<ExContext1.provider value={...}>
        	<ExContext2.provider value={...}>
            	...
            </ExContext2.provider>
        </ExContext1.provider>
    );
}

...

function Content(props){
	return(
    	<ExContext1.Consumer>
        	{theme => (
            	<ExContext2.Consumer>
                	{theme => (...)}
                </ExContext2.Consumer>
            )}
        </ExContext1.Consumer>
    );
}

 

-hook을 사용하면 좀 더 쉽게 사용할 수 있다. 무거운 작업일 경우 최적화 해야한다.

const MyContext = React.createContext('예시');

function MyContext(props){
	const value = useContext(MyContext);
    
    return(...);
}

 

-실습

import React from "react";

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

export default ThemeContext;

ThemeContext.jsx

 

import {useContext} from "react";
import ThemeContext from "./ThemeContext";

function MainContent(props){
    const {theme, toggleTheme} = useContext(ThemeContext);

    return(
        <div style={{width:"100vw",height:"100vh",padding:"1.5rem",
            backgroundColor: theme == "light" ? "white" : "black",
            color : theme == "light" ? "black" : "white"
        }}>
            <p>안녕하세요. 테마 변경 사이트 입니다.</p>
            <button onClick={toggleTheme}>테마 변경</button>
        </div>
    );
}

export default MainContent;

MainContent.jsx

 

import { useState, useCallback } from "react";
import ThemeContext from "./ThemeContext";
import MainContent from "./MainContent";

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

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

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

export default DarkOrLight;

DarkOrLight.jsx

 

(index.js 생략)