(리액트 문서 베타) 1-1.컨텍스트 생성

React Docs(베타) 번역 및 정리

컨텍스트 만들기

구성 요소가 읽거나 제공할 수 있는 컨텍스트를 만듭니다.

const SomeContext = createContext(defaultValue)

createContext (기본값)

구성 요소 외부에서 호출하여 컨텍스트 생성

import { createContext } from 'react';

const ThemeContext = createContext('light');

매개변수

기본값

– 일치하는 컨텍스트 공급자가 없는 경우 컨텍스트가 가질 값

– 의미있는 기본값이 없으면 null을 지정하십시오.

반환 값

컨텍스트 객체를 반환

컨텍스트 개체 자체에는 정보가 없습니다.

– 다른 구성 요소에서 사용하거나 제공하는 컨텍스트를 나타냅니다.

– 일반적으로 구성 요소 SomeContext.Provider컨텍스트 값 지정

– 그리고 컨텍스트 사용(일부 컨텍스트) 양식을 호출하여 값을 읽습니다.

컨텍스트 개체에는 두 가지 속성이 있습니다.

– SomeContext.Provider : 하위 구성 요소에 값을 제공합니다.

– SomeContext.Consumer: 거의 useContext로 대체됨(값을 읽는 방법)

SomeContext.Provider

모든 하위 구성 요소에 컨텍스트 값을 할당하여 컨텍스트 공급자로 구성 요소를 래핑합니다.

function App() {
  const (theme, setTheme) = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

소품

값

– 읽기 컨텍스트의 모든 구성 요소에 전달할 값

– 모든 데이터 유형 사용 가능

SomeContext.소비자

대신 useContext를 사용하십시오!

function Button() {
  // ✅ Recommended way
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

예 1. 컨텍스트 생성

– 구성 요소 외부에서 createContext 호출

– 여러 번 호출 가능

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext는 컨텍스트 개체를 반환하고 구성 요소는 컨텍스트 개체를 useContext에 전달하여 데이터를 읽습니다.

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

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

위 코드에서 theme는 ThemeContext의 defaultValues가 됩니다.

– defaultValues는 절대 변경되지 않으므로 사용하지 않을 경우 null을 지정할 수 있습니다.

---

컨텍스트는 모든 유형의 동적 값을 제공할 수 있습니다.

function App() {
  const (theme, setTheme) = useState('dark');
  const (currentUser, setCurrentUser) = useState({ name: 'Taylor' });

  // ...

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

이제 Page 구성 요소와 모든 하위 구성 요소는 useContext를 호출하여 컨텍스트 값을 읽을 수 있습니다.

전달된 컨텍스트 값이 변경되면 컨텍스트를 읽는 모든 구성 요소가 다시 렌더링됩니다.