Portfolio

createContext를 사용하면 컴포넌트가 제공하거나 읽을 수 있는 컨텍스트를 만들 수 있습니다.

const SomeContext = createContext(defaultValue)

참조

사용법

문제 해결

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

참조

`createContext(defaultValue)`

컴포넌트 외부에서 createContext를 호출하여 컨텍스트를 생성하세요.


import { createContext } from 'react';

const ThemeContext = createContext('light');

아래에서 더 많은 예제를 확인하세요.

매개변수

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

반환값

createContext 는 컨텍스트 객체를 반환합니다.

컨텍스트 객체 자체는 어떠한 정보도 보유하지 않습니다. 다른 컴포넌트가 읽거나 제공할 수 있는 컨텍스트를 나타냅니다. 일반적으로 상위 컴포넌트에서 SomeContext.Provider를 사용해 컨텍스트 값을 지정하고, 하위 컴포넌트에서 useContext(SomeContext)를 호출해 컨텍스트 값을 읽습니다. 컨텍스트 객체에는 몇 가지 속성이 있습니다:

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

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

`SomeContext.Provider`

컴포넌트를 컨텍스트 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`

useContext 이전에는 컨텍스트를 읽는 오래된 방법이 있었습니다:


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

이 오래된 방법은 여전히 동작하지만 새로 작성된 코드는 대신 useContext()를 사용하여 컨텍스트를 읽어야 합니다:


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

Props

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

사용법

context 생성하기

컨텍스트는 컴포넌트가 프로퍼티를 명시적으로 전달하지 않고도 정보를 깊숙이 전달할 수 있게 해줍니다.

하나 이상의 컨텍스트를 생성하려면 컴포넌트 외부에서 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);
  // ...
}

기본적으로 수신되는 값은 컨텍스트를 만들 때 지정한 기본값이 됩니다. 그러나 기본값은 절대 변경되지 않기 때문에 그 자체로는 유용하지 않습니다.

컨텍스트가 유용한 이유는 다음과 같이 컴포넌트에 다른 동적 값을 제공할 수 있기 때문입니다:


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 컴포넌트와 그 안에 있는 모든 컴포넌트는 아무리 깊숙이 들어가더라도 전달된 컨텍스트 값을 “바라보게” 됩니다. 만약 전달된 컨텍스트 값이 변경되면, React는 컨텍스트를 읽는 컴포넌트도 다시 렌더링합니다.

컨텍스트 읽기 및 제공에 대한 자세한 내용과 예시를 참조하세요.

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

서로 다른 파일에 있는 컴포넌트가 동일한 컨텍스트에 액세스해야 하는 경우가 종종 있습니다. 그렇기 때문에 컨텍스트를 별도의 파일에 선언하는 것이 일반적입니다. 그런 다음 export 구문을 사용하여 다른 파일에서 컨텍스트를 사용할 수 있도록 설정할 수 있습니다:


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

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

다른 파일에서 선언된 컴포넌트는 import 구문을 사용하여 이 컨텍스트를 읽거나 제공할 수 있습니다:


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

이는 컴포넌트 import 및 export와 유사한 방식으로 작동합니다.

문제 해결

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

다음과 같은 코드는 기본 컨텍스트 값을 지정합니다:

const ThemeContext = createContext('light');

이 값은 절대 변하지 않습니다. React는 위에서 일치하는 provider를 찾을 수 없는 경우에만 이 값을 대체하여 사용합니다.

시간이 지남에 따라 컨텍스트가 변경되도록 하려면 컨텍스트 provider에 state를 추가하고 컴포넌트를 감싸세요.