【React】カスタムフックの作成と使い所と実例
Reactのカスタムフックの作成方法と使い方を紹介します。
Reactのカスタムフックとは
useStateなどのReact Hookを内部で使っている関数(フック)のことをカスタムフックといいます。
Reactのカスタムフックの使い所
ReactのHookなどを複数コンポーネントで使いまわしたいときにカスタムフックを使用します。
useStateなどのReactのHookは基本的にはコンポーネントのトップレベルでのみ使用可能です。
ただし、useのつく関数の中では、例外的に使用することができるというReactの決まりごとがあります。
React Hookを関数に切り出すことで、再利用できるようになります。
カスタムフックの関数名
カスタムフックの関数名は、必ずuseなんとかと、頭に「use」をつける必要があります。
カスタムフックの実例
createContextとuseContextを使用しています。
これらの説明は、以下を参考にしてみてください。
カスタムフックは、useModalContext部分です。
useContextをリターンしています。その引数にModalContextというcreateContextで作成したコンテキストがあります。
これは、Providerで使いたいコンポーネントをラップして、childrenで使えるようにします。
そして、index.jsなどの使いたいコンポーネントで以下のようにしてラップします。
すると、アプリ全体でvalueに設定した値
にアクセスすることができます。
あとは、たとえばナビゲーションでモーダルを開きたいという場合、以下のように使います。
そして、モーダルを閉じたいときは、モーダル部分で以下のように使います。