[Hook] useContext

리액트 공식 문서를 참고한 정리 내용 (25.08 기준)

컴포넌트에서 Context를 읽고 구독할 수 있다.

useContext를 컴포넌트의 최상위 수준에서 호출하여 Context를 읽고 구독한다.

const value = useContext(someContext)

매개변수

SomeContext

• createContext로 생성한 Context이며, Context 자체는 정보를 담고 있지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낸다

---

반환값

useContext(SomeContext)를 호출하면, 그 컴포넌트가 속해 있는 Context의 현재 값을 가져올 수 있다. 이 값은 트리에서 제일 가까운 SomeContext가 준 value(부모 쪽에서 내려준 값)에 따라 결정된다.

만약 Provider가 하나도 없다면, createContext(defaultValue)를 할 때 지정한 기본값을 돌려준다.
Context 값이 바뀌면, React가 자동으로 이 Context를 쓰는 컴포넌트를 다시 렌더링해서 항상 최신 값을 쓰게 해준다.

const ThemeContext = React.createContext("light");

function Button() {
  const theme = useContext(ThemeContext);
  return <p>현재 테마: {theme}</p>;
}

function App() {
  return (
    <ThemeContext value="dark">
      <Button /> {/* 여기서는 "dark" */}
    </ThemeContext>
  );
}

Button은 useContext(ThemeContext)로 dark를 가져온다. 만약 Provider가 없었다면 기본값 light를 가져왔을 것

---

사용법

Context를 통해 전달된 데이터 업데이트하기

Context를 업데이트 하려면 State와 결합하면 된다.

function MyPage() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext value={theme}>
      <Form />
      <Button onClick={() => {
        setTheme('light');
      }}>
        Switch to light theme
      </Button>
    </ThemeContext>
  );
}

부모 컴포넌트에서 State 변수를 선언하고 현재 State를 Context Value로 Provider에 전달한다.

위의 코드처럼 Provider 내부의 모든 Button은 현재 theme 값을 받게된다.
Provider에 전달된 theme 값을 업데이트 하기 위해 setTheme을 호출하면, 모든 Button 컴포넌트가 새로운 light 값으로 다시 렌더링 된다.

---

Fallback 기본값 지정

부모 트리에서 특정 Context Provider를 찾을 수 없는 경우, useContext()가 반환하는 Context 값은 해당 Context를 생성할 때 지정한 기본값고 동일하다.

const ThemeContext = createContext(null);

기본값은 변경되지 않으며, Context를 업데이트 하려면 Stste와 함께 사용해야 한다.
그리고 기본값은 null 대신에 더 의미 있는 값으로 세팅하는게 좋다.