createContext

• 참조
• createContext(defaultValue)
• SomeContext.Provider
• SomeContext.Consumer

• 사용법
• context 생성하기
• 파일에서 컨텍스트 import 및 export하기

• 문제 해결
• 컨텍스트 값을 변경하는 방법을 찾을 수 없습니다

참조

createContext(defaultValue)

import { createContext } from 'react';

const ThemeContext = createContext('light');

매개변수

• defaultValue: 컨텍스트를 읽는 컴포넌트 상위 트리에 일치하는 컨텍스트 provider가 없을 때 이 컨텍스트가 갖도록 할 값입니다. 의미 있는 기본값이 없다면 null을 지정하세요. 기본값은 “가장 마지막 수단”으로 사용됩니다. 기본값은 정적이며 시간이 지나도 절대 변경되지 않습니다.

반환값

• SomeContext.Provider를 사용하면 컴포넌트에 컨텍스트 값을 제공할 수 있습니다.

• SomeContext.Consumer 는 컨텍스트 값을 읽는 또다른 방법이며 거의 사용되지 않습니다.

SomeContext.Provider

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

Props

• value : 이 값은 해당 provider 내에서 이 컨텍스트를 읽는 모든 컴포넌트에 전달하려는 값으로, 깊이에 상관없이 전달할 수 있습니다. 컨텍스트 값은 모든 타입이 될 수 있습니다. provider 내부에서 useContext(SomeContext)를 호출하는 컴포넌트는 그 위에 있는 가장 안쪽에 해당하는 컨텍스트 provider의 value를 받습니다.

SomeContext.Consumer

function Button() {
  // 🟡 Legacy way (not recommended)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

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

Props

•  children : 함수입니다. React는 useContext()와 동일한 알고리즘에 의해 결정된 현재 컨텍스트 값으로 전달한 함수를 호출하고, 이 함수에서 반환한 결과를 렌더링합니다. 또한 React는 부모 컴포넌트의 컨텍스트가 변경될 때마다 이 함수를 다시 실행하고 UI를 업데이트합니다.

사용법

context 생성하기

import { createContext } from 'react';

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

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

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

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>
  );
}

파일에서 컨텍스트 import 및 export하기

// Contexts.js
import { createContext } from 'react';

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

// Button.js
import { ThemeContext } from './Contexts.js';

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

// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

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

문제 해결

컨텍스트 값을 변경하는 방법을 찾을 수 없습니다