Contextの作成

ContextはcreateContextという名前の関数で作成できます.

import { createContext } from 'react';

const LocaleContext = createContext();

参考までに下記のようにデフォルト値を入れることができます

import { createContext } from 'react';

const LocaleContext = createContext('ko');

Contextの適用

Contextに書き込む場合は、共有値の範囲を特定して書き込む必要があります.
範囲はContextオブジェクトのProviderという名前のコンポーネントとして定義できます.
その後、Providerのvaluepropを使用して共有値を下げることができます.

import { createContext } from 'react';

const LocaleContext = createContext('ko');

function App() {
  return (
    <div>
       ... 바깥의 컴포넌트에서는 LocaleContext 사용불가

       <LocaleContext.Provider value="en">
          ... Provider 안의 컴포넌트에서는 LocaleContext 사용가능
       </LocaleContext.Provider>
    </div>
  );
}

Context値の使用

userContextという名前のHookを使用して値を取得および使用できます.
そして使うContextを私たちに伝えればいいのです

import { createContext, useContext } from 'react';

const LocaleContext = createContext('ko');

function Board() {
  const locale = useContext(LocaleContext);
  return <div>언어: {locale}</div>;
}

function App() {
  return (
    <div>
       <LocaleContext.Provider value="en">
          <Board />
       </LocaleContext.Provider>
    </div>
  );
}

State、Hookとの併用

プロバイダとして機能する構成部品を作成します.
ここでStateを作成してvalueに渡すことができます.
次のuseLocaleもあります
また、useContextを使用してインポート値のカスタムホームページを作成することもできます.
これにより、Contextが使用するState値は以下のようになります.
私たちが作成した関数でしか書けないからです.
これは、セキュリティコードの作成に役立ちます.

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

const LocaleContext = createContext({});

export function LocaleProvider({ children }) {
  const [locale, setLocale] = useState();
  return (
    <LocaleContext.Provider value={{ locale, setLocale }}>
      {children}
    </LocaleContext.Provider>
  );
}

export function useLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error('반드시 LocaleProvider 안에서 사용해야 합니다');
  }

  const { locale } = context;
  return locale;
}

export function useSetLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error('반드시 LocaleProvider 안에서 사용해야 합니다');
  }

  const { setLocale } = context;
  return setLocale;
}