[React] Hooks - useContext

정의

useContext는 컴포넌트에서  context를 읽고 구독할 수 있게 해주는 훅

const value = useContext(SomeContext)

 

 

Reference

useContext (SomeContext)

컴포넌트의 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독합니다.

import { useContext } from 'react';

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

 

 

Parameters

SomeContext : context자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류

 

Returns

useContext는 호출하는 컴포넌트에 대한 context값을 반환합니다. 이 값은 호출한 컴포넌트에서 트리상 위에 있는 가장 가까운 SomeContext.Provider에 전달된 value입니다. 이러한 provider가 없는 경우 반환되는 값은 해당 context에 대해 createContext에 전달한 defaultValue가 됩니다. 반환된 값은 항상 최신 값입니다.

React는  Context가 변경되면 context를 읽는 컴포넌트를 자동으로 리렌더링합니다.

 

 

Usage

데이터 전달하기

context를 버튼에 전달하려면 해당 버튼 또는 상위 컴포넌트 중 하나를 해당 context provider로 감쌉니다.

 

import { useContext } from 'react';

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

 

 

Form 내부의 버튼이 useContext(ThemeContext)를 호출하면 'dark' 값으로 받습니다.

function MyPage() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  );
}

function Form() {
  // ... renders buttons inside ...
}

 

Notice useContext()는 호출하는  컴포넌트  위의 가장 가까운 Provider를 찾고, 호출하는 컴포넌트 내의 Provider는 고려하지 않습니다.

 

 

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

시간이 지남에 따라 context가 변경되기를 원하는 경우 state와 함께 사용합니다.

부모 컴포넌트에 state변수를 선언하고 현재 state를 context값으로 provider에 전달

 

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

 

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Form />
      <label>
        <input
          type="checkbox"
          checked={theme === 'dark'}
          onChange={(e) => {
            setTheme(e.target.checked ? 'dark' : 'light')
          }}
        />
        Use dark mode
      </label>
    </ThemeContext.Provider>
  )
}

function Form({ children }) {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}