[React] useContext

useContext 훅을 사용하면, 컴포넌트를 사용하지 않고도 부모 컴포넌트로부터 전달된 컨텍스트 데이터를 사용할 수 있다.

A B C 가 각각 부모자식 관계를 가진 컴포넌트 상황에서
만약 A에서 C라는 컴포넌트를 보내주려면 B를 거쳐야만 하는 번거로운 작업을 해소할 수 있다.

다만 Context는 꼭 필요할 때 사용해야한다. Context를 사용하면 컴포넌트를 재사용하기 어려워질수 있기 때문이다.
Props Drilling을 피하기 위한 목적이라면 Component Composition을 고려해보자.

// ContextContent.jsx
import { ThemeContext } from "../context/ThemeContext";

const ContextContent = () => {
  const { isDark } = useContext(ThemeContext);
  return (
    <div
      className="content"
      style={{
        backgroundColor: isDark ? "black" : "white",
        color: isDark ? "white" : "black",
      }}
    >
      <p>선기야 좋은 하루!</p>
    </div>
  );
};

export default ContextContent;

// useContextPrac.jsx
import { ThemeContext } from "../context/ThemeContext";

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

  return (
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      <ContextPage />
    </ThemeContext.Provider>
  );
}

export default UseContextPrac;

다음과 같이 컨텍스트 프로바이더로 감싸주고 해당 페이지에서
ThemeContext라는 프로바이더를 가져와 사용했다.

// ThemeContext.js

import { createContext } from "react";

export const ThemeContext = createContext(null);

createContext로 컨텍스트를 만들어 기본값으로 value를 지정할 수 있으나, null로 지정한건 Provider에 상태에 대한 value를 넣어 감싸주었기 때문에, 별도로 Defaultvalue 지정을 하지 않았다.

해당 value는 context를 사용하고 있는 모든 component에 value가 같이 바뀌기 때문에 반드시 필요한 부분에 대한 적절한 분리 설계를 해야하는것을 유의하자.

소스코드