useContext

오늘 다크모드를 구현하려다가 porps drilling에 어려움을 겪고 있어서 방법이 없을까 이것저것 찾아보고 있었다 그렇게 찾아본것이 useContext라는 리액트 훅이였다 !

useContext 란?

내게 필요한 props 를 글로벌하게 사용할 수 있게 도와주는 훅이다!
원래라면 리액트 작업하면서 props를 많이 사용하는데 부모 자식관계일 때만 props가 가능하고 그런 관계가 아니면 props drilling 을 이용하여 번거롭게 여러번 props를 받아야 할 때가 많다 !
컴포넌트가 정말 많아진다면 버그를 찾는것도 어려워 질 것이고 수정하는 것도 진짜 어려울 것이다 !
하지만 useContext를 이용하면 전역으로 사용할 수 있게 되고 props drilling을 하지 않아도 전달 가능하게 된다! 다시 말해서 전역적으로 사용되는 데이터들을 여러 컴포넌트들 끼리 쉽게 공유할수 있는 방법을 공유해준다!
여기서 주의할점!
-컴포넌트를 재사용하기 어려워질수 있기 떄문에 꼭 필요할때만 써야함 !!!!!

사용법

import { createContext } from "react";

export const ThemeContext = createContext(null);

createContext 라는 훅을 사용하여 단일 export 할 수 있는 변수를 생성하고 내게 필요한 변수나 함수를 정해준다!

function App() {
  const [isDark, setIsDark] = useState(false);
  return (
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      <Router />
    </ThemeContext.Provider>
  );
}

데이터를 보내줄 수 있는곳에 .ThemeContext.Provider 를 생성하여 관리하고 싶은 컴포넌트를 감싸준다 . 감싸준 후 보낼 값들을 value에 넣어준다!
이제 Router 컴포넌트 안에 있는 컴포넌트들은 value 안에 있는 값들을 사용할 수 있게 된다!
사용할 컴포넌트에 들어가서 import { ThemeContext } from "../../context/ThemeContext";를 임포트 해주고 !
const { isDark } = useContext(ThemeContext); 훅을 이용하여 가져와준다!
객체형태로 가져오기 때문에 오브젝트디스트럭쳐를 이용하여 isDark를 빼주어서 사용한다!

나는 다크모드를 구현할 때 전역적으로 필요하요 사용을 해보았다. props drilling 하려고 생각해서 막막했던것이 useContext를 이용하여 편리하게 사용할 수 있어 좋았다!