React) useContext 기본 구조

용도: context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다.

 

* context 폴더 ~ 기본 파일 (예시 활용, 다크모드 구현하기 ... DarkModeContext.jsx)

 

 

 

- 선언

import { createContext, useContext } from "react";

export const DarkModeContext = createContext();

export function DarkModeProvider({ children }) {
  const [darkMode, setDarkMode] = useState(false);
  const toggleDarkMode = () => setDarkMode(!darkMode);

  return (
    <DarkModeContext.Provider value={{darkMode, toggleDarkMode}}>
      {children}
    </DarkModeContext.Provider>
  );
}

export const useDarkMode = () => useContext(DarkModeContext);

---

- 사용법

 

App.js

 

Header.jsx

 

참고)

 

- https://ko.reactjs.org/docs/context.html