[React] useContext

• 공식 참고 문서 : https://reactjs.org/docs/context.html

Context – React

• 컴포넌트와 컴포넌트 간 상태를 공유할 때 사용
• 부분적인 컴포넌트들의 상태 관리, 전체 앱의 상태관리 구현
• Context Provider 안에서 렌더링되는 컴포넌트는 context value를 가져옴
• context value가 바뀌면 내부 컴포넌트는 모두 리렌더링됨
• 사용 예시 :

import { createContext, useContext, useState } from "react";

const DarkModeContext = createContext();

export function DarkModeProvider({children}) {
    const [darkMode, setDarkMode] = useState(false);
    const toggleDarkMode = () => setDarkMode((prev) => !prev);
    return (
        <DarkModeContext.Provider
        value = {{darkMode, toggleDarkMode}}
        >
            {children}
        </DarkModeContext.Provider>
    )
}

export const useDarKMode = () => useContext(DarkModeContext)

1. createContext 만들기

2. context.Provider 형태로 리턴해주는 함수 만들어서 export

3. 사용 원하는 컴포넌트에 감싸주기 

<DarkModeProvider>
 <p>다크모드!</p>
</DarkModeProvider>

4. value로 넘겨준 값 불러와서 사용

 const { darkMode, toggleDarkMode } = useContext(DarkModeContext);

rkModeContext);