相変わらず本業は忙しいのですが、忙しさに怠けてはいけない・・・と平日も短い稼働ではありますが、学習を継続しています🤗

本日の学び✍️

改めてですが以前からUdemyのじゃけえさんの講座を受講しています。
その中で実践的なユーザ管理アプリの開発があり年明けから取り組んでおります！ちょっとした自慢ですが前回の記事で書きましたが、開発環境はテンプレートを自作してオリジナルな環境で受講しています🤓気になる方はぜひ見てくださいw（大した事ないですがw）

そしていよいよ9割型受講し出来上がってきたのですが、

React Contextの使い方や考え方が全然分からなーーーーい！！

以前に学習したのですがその際はすぐにRecoilの学習に力を入れていたので、あまり理解しないままここまで来たので困ってしまいましたw。
ということで自分なりにReact Contextの考え方や使い方をまとめてみました！

そもそもReact Contextとは 🤔

Reactでコンポーネントを作成していくと親コンポーネントから子コンポーネントにPropsを渡すことがよくありますよね！ただし2階層くらいなら問題ないのですが、3,4,5・・・となるとpropsを渡すのが大変になる=propsのバケツリレー状態となります。これを回避するためにReact ContextというReact純正のAPIを使うという訳です。

使い方 🔨

まずはpropsをグローバル化する箱を用意してあげます。

const Hoge = createContext()

次にこの箱をどの範囲で使いたいかを考えます。
たとえばログインユーザーの情報に応じてあれこれしたい・・・となった場合は全てのコンポーネントを包んであげる必要があります。
そのためにまずこの箱を使えるコンポーネントを作ってあげる必要があります。
このcreateContextではProvide関数というがあるので、それで包括してあげる必要があります。

//ページ構成
-Login画面
-ホーム画面
  |_下層ページA
  |_下層ページB

//Providerコンポーネントを作成
export const HogeProvider = () => {
  //何かしらの定義や処理
  return (
    <Hoge.Provider value={{infoA, infoB}}><Hoge.Provider/>
  )
}

これで<HogeProvider>コンポーネントで囲ってあげることでアプリ全体でグローバルなステートを参照、更新する環境が整いました！
ちなみにvalueで指定した値がグローバルなpropsとなります。
なのでページ構成の通り囲ってあげると

//Routerを定義するファイル.tsx
<HogeProvider>
  <Login />
  <Home>
    <PageA />
    <PageB />
  <Home />
</ HogeProvider>

これで全ての画面でvalueの値（つまりグローバルなprops）を参照、更新することが可能になりました！

そしてこのグローバルなプロップスを実際に更新、参照するためにはuseContext()という関数があります。

//グローバルなプロップスを使いたいどこかのページ.tsx
const { infoA } = useContext(Hoge)

上記のようにuseContextの引数に先ほど作成したコンテキストの名前を入れてあげて{}内に使用したいグローバルなプロップスの変数を入れてあげる事で、任意のコンポーネント内でグローバルなプロップスを使用できるようになる。

あとはこの値を煮るなり焼くなり・・・( ^ω^ )

ちなみにカスタムフックを使用することで保守性をあげることができる！！各下層ページでuseContext(Hoge)としても良いのですが、作成したコンテキストの関数名が変わったりvalueの名称が変わったり・・・と何かしら大元のコンテキストに変更があった場合に、いちいち各ファイルでuseContextの記述を変更するのは面倒ですよね。
その場合はカスタムフックを使ってあげることで、このフックを修正するだけでコンテキストの変更を管理してあげる事ができます！

//カスタムフック useHoge.tsx
export const useHoge = useContext(Hoge)

////グローバルなプロップスを使いたいどこかのページA.tsx
const {infoA} = useHoge()

////グローバルなプロップスを使いたいどこかのページB.tsx
const {infoB} = useHoge()

これで各ファイルを更新せずカスタムフックを修正するだけでよくなりました👏

と、ここまで解説してきた訳ですが、これを理解するのにとても苦労しまして・・・
理解するにはそれなりの時間がかかりました・・・w
そこで私はコードを理解するためによく手書きの図を書いたりします。
「このファイルとこのファイルはこういう関係性で・・・、このpropsがこういう風にこのコンポーネントに受け渡されて・・・」
といった感じで以下が手書きメモですが、詳しくは解説しないですが、こんな雑なメモでも書くだけあで理解が深まるよ！！という事でちょっとした参考にしてください😇

👇👇👇👇👇

まとめ🙆‍♂️

いやぁ、じゃけえさんの実践編で心が折れかけたのですが、
Reactは理解できると本当に楽しいですね😆

全然関係ないですが今後オリジナルアプリを作成するために、React以外の周辺知識を移動時間とかにググったりしてます。FireBase,Firebase Authentication,GithubActions・・・いつになるかわかりませんが記事にしたいと思います！！
いやぁ、楽しい！！

では( ＾∀＾)