context는 React 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안된 방법

• Context를 사용하지 않으면 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달한다. → 넘겨야 할 props의 개수가 많아 질수록 불편함

트리 구조가 복잡해질 수록 하위 컴포넌트로 props를 전달하기 위해 drilling이 발생할 수 있게 되고 그러면 유지보수가 힘듬

<aside> 💡 props drilling → 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어

</aside>

단, context를 사용하면 컴포넌트를 재사용하기 어려워지기 때문에 꼭 필요할 때만 사용해야함

const DarkModeContext = createContext(null);

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

    return (
        <DarkModeContext.Provider value={{isDark, setIsDark}}>
            <Header/>
            <Content/>
            <Footer/>
        </DarkModeContext.Provider>
    );
}

Provider는 value prop을 이용하여 하위 컴포넌트에게 값을 전달한다.

이 때 값을 전달받을 수 있는 컴포넌트 수에는 제한이 없다

해당 Provider는 Context 이름으로부터 useContext hooks를 활용하여 어느 컴포넌트든 필요한 순간 가져다 쓸 수 있다. → 전역변수 개념

function Header() {
    const context = useContext(DarkModeContext);  // 전역으로 context 사용
    const {isDark} = context;

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