react - context

react Context

만약 여러개의 컴포넌트에서 중복되는 상태값을 관리하고 싶다면, 기존의 방법중에는
최근접한 부모 컴포넌트에서 useState를 사용하여 상태를 관리하고, 그 하위 컴포넌트에 props로 전달해주어서 여러 컴포넌트에서 상태를 관리할 수 있었습니다.
하지만 이런식으로 의미없는 컴포넌트에서도 props로 전달하게 된다면 Prop Drilling이 발생하게됩니다.
이 때 Context를 사용한다면 원하는 컴포넌트 또는 모든 컴포넌트에 보다 쉽게 데이터를 전달할 수 있습니다.

사용 방법

1. createContext 메서드를 사용해 context를 생성합니다.
2. 생성된 context를 context provider 컴포넌트 트리로 감싸줍니다.
3. context provider의 Props로 전해줄 데이터를 입력합니다.
4. 사용하고 싶은 컴포넌트에서 context consumer를 통해 context를 불러옵니다.

const DarkmodeContext = createContext();
function DarkmodeProvider({children}){
  const [darkMode,setDarkMode] = useState(false)
  const toggleDarkMode = () =>{
    setDarkMode(mode=>!mode)
  } 
  return <DarkmodeContext.Provider value={
      {darkmode,toggleDarkMode}
    }>{children}</DarkmodeContext.Provider>
}

어느 컴포넌트에서 어느컴포넌트까지 Context를 사용할건지, provider를 통해 감싼 후

사용하고 싶은 컴포넌트에서,

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

받아오고 싶은 변수,함수 등을 구조분해 할당으로 받을 수 있습니다.