useContext

useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 React Hook입니다.

주의사항

• <Context.Provider>는 반드시 useContext() 호출을 수행하는 컴포넌트 위에 있어야 합니다.

• React는 변경된 value를 받는 provider부터 시작해서 해당 context를 사용하는 자식들에 대해서까지 전부 자동으로 리렌더링합니다.

import { useContext } from 'react';

function Button() {
  const theme = useContext(ThemeContext);
  // ...

useContext는 전달한 context에 대한 context 값을 반환합니다. context 값을 결정하기 위해 React는 컴포넌트 트리를 검색하고 특정 context에 대해 위에서 가장 가까운 context provider를 찾습니다.

함정

Plus