[TIL] Context

Context

Context란?

컴포넌트의 계층 구조가 두 단계 이상으로 깊어지게 된다면 다이렉트로 전달할 수가 없고 중간 컴포넌트를 거쳐서 전달해야 한다. 이러한 과정을 Props Drilling이라고 한다.

 

Props Drilling을 해결하기 위해 리액트에서는 컨텍스트를 제공한다.

 

컨텍스트는 리액트 컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능이다. 데이터를 보관하는 일종의 데이터 보관소 역할을 한다.

 

 

컨텍스트를 생성한 다음에 전달할 데이터를 Context에 보관해놓으면 props를 이용하지 않고 다이렉트로 필요한 데이터를 전달해 줄 수 있다.

 

context 사용법

const 컨텍스트 = createContext();

 

react 패키지가 제공하는 createContext 메서드로 컴포넌트 바깥에서 컨텍스트 객체를 생성한다.

 

컨텍스트 객체는 Provider 컴포넌트를 제공하는데 해당 컨텍스트가 공급할 데이터를 설정하거나 데이터를 공급 받을 컴포넌트를 설정하기 위해서 사용한다.

 

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

 

Provider 컴포넌트를 최상위 컴포넌트로 설정하고 value 속성에 전달할 데이터를 설정하면 된다.

 

컨텍스트의 데이터를 꺼내올 때는 전달받을 컴포넌트에서 useContext 훅의 인수로 컨텍스트를 넣어서 호출하면 된다.

 

const value = useContext(컨텍스트);