【React学習】〜useContext〜

React

　Reactではコンポーネントごとにstateを管理することになりますが、同じ値を複数のコンポーネントで使いたい時があります。

親要素と子要素

　Reactのコンポーネントは、HTML要素と同じようにタグでラップすることができます。ラップされた要素は子要素とよばれ、childrenとして親要素に渡されます。ここで、親要素で管理している値や関数をpropsとして子要素に渡すことができるんですが、コンポーネントを細分化すると、孫要素やひ孫要素、兄弟要素など、要素が複雑になり、親の管理する値や関数を使いたいコンポーネント全てにpropsを渡さなければいけません。

　ここで登場するのがuseContextというhookです。

createContextとuseContext

　親→子→孫という流れでpropsを渡していくことを「propsのバケツリレー」というそうです。それを防ぐために、どのコンポーネントからも呼び出せる値を作成するのがcreateContextで、コンポーネント側で呼び出すのに使うのがuseContextです。

const SomeContext = createContext(defaultValue);

const Example = () => {
  return (
    <SomeContext.Provider value={value}>
      <Child />
    </SomeContext.Provider>
}

const Child = () => {
  const some = useContext(SomeContext);
  return (
    <div>{some}</div>
  );
}

　こんな感じです。(コンポーネントを別ファイルに分けるときは、SomeContextをインポートする必要があります)

　createContextで作られたProviderでラップされた全ての子要素で、contextを使用できます。値を変更したい場合はuseStateで設定した値を用いればOK。ただ、useReducerで値と更新用関数を設定する方がいいと思います。(useReducerについては、また今度まとめてみようと思います。

コメント