【ReactHooks入門】第4回：useContextの理解
Тәжірибелік нұсқаулар және стиль
【目次】
0:00 お礼の言葉
1:05 今回のゴール
1:25 useContextとは
3:35 Contextを扱う上で覚えておきたい用語
7:00 ハンズオン開始
9:15 ステップ１：AuthProviderの作成
13:30 ステップ２：App.tsxへAuthProviderを導入
15:30 ステップ３：UIコンポーネントの作成
21:50 ステップ４：useStateの導入
30:00 次回予告
↓本講座のソースコードはこちら
github.com/Naoya-abe/hooks-ba...
【参考】
フック API リファレンス
ja.reactjs.org/docs/hooks-ref...
Context機能について
ja.reactjs.org/docs/context.html
フック早わかり
ja.reactjs.org/docs/hooks-ove...
React Context API
ichi.pro/react-context-api-59...
React.ts の状態管理に useContext を使う
zenn.dev/yuki0410/articles/ea...
【useContext編】React hooksをイチから理解しよう
onityanzyuku.com/react-hooks-...
React Context API と useContext() の使い方
gotohayato.com/content/523/
React Context / Hooks 入門
uncle-javascript.com/react-co...
こんなに簡単なの？React Hook useContextでデータ共有
reffect.co.jp/react/react-use...
useContextのしくみ
qiita.com/ossan-engineer/item...
React hooksを基礎から理解する (useContext編)
qiita.com/seira/items/fccdf4e...
ーーーーーーーーーーーーーーーーーーーーーー
SNS
ーーーーーーーーーーーーーーーーーーーーーー
【Twitter：@abechan_front】
あべ＠世界一優しいReact講師
/ abechan_front
ーーーーーーーーーーーーーーーーーーーーーー
プロフィール
ーーーーーーーーーーーーーーーーーーーーーー
■あべちゃん
本業：大手IT企業 新規事業開発部所属
副業：フリーランスエンジニア、大手プログラミングスクール元講師
個人事業：Reactに特化したオンライン塾を運営
Music: www.bensound.com
Пікірлер: 11
実装で困っていたのですが、この動画のおかげで解決しました！内容も非常に分かりやすいです。ありがとうございますー
@youtube2603
2 жыл бұрын
コメントありがとうございます！ こちらこそ、はるにさんのお役に立てて嬉しいです😁
中々理解できない部分があり、質問させていただきたいです。 Context.Providerの必要性が分からなくなってきてしまいました。 動画の中のAuthContextを受け取りたい場所でimportし、useContext(AuthContext)とすればcreateContextで定義した値を取得できるかと思うのですが、 なぜContext.Providerは必要なのでしょうか？ 単純に公式のドキュメントで、そのように利用することが推奨されているからって感じなのでしょうか。 調べても中々分からず質問させていただきました。 理解度低く申し訳ありませんが、お手隙でご回答いただけますと幸いです！
@youtube2603
2 жыл бұрын
動画のご視聴ありがとうございます！ Providerの存在意義としては2点あると考えておりますのでご確認をお願いいたします！ 1点目は「defaultValueでは指定できない（または実装がめんどくさい） 値をConsumer側に渡したい時に、Providerで値を更新してConsumerに渡すことができる」です。 今回の場合は、「useStateで作成した値と関数をConsumer側に渡したかった」となります。この場合以外にも、「バックエンドとhttp通信を行った結果をConsumer側に渡したい」といった時にも使えますね！ というのも、Consumer側で受け取るvalueは、ツリー内の上位で一番近いこのContext用のProviderの value プロパティと等しくなるからです。 そして、このContext用のProviderが上位に存在しない場合、引数の value は createContext() から渡された defaultValue と等しくなるように作られています。 また、2点目としては「値を渡すコンポーネントの範囲を明示化できるところ」です。 「値を渡すコンポーネントの範囲を明示化できる」ことで、それらのコンポーネント内でしかcreateContextで生成された値を共有しないなどの共通認識をチーム内で持てますので、チーム開発を円滑にすすめることができます。 以上、ご回答となりますが、あくまでこれは私個人の考えですので、1つの参考意見としてご認識ください！
@3deppa124
2 жыл бұрын
@@youtube2603 お忙しい中ご回答いただきありがとうございます！ 1点目につきましては、まだConsumerの方について理解が浅いので、これから学んで行こうかと思います。 2点目につきましては、現状でも、とてもしっくりきました！ とても勉強になりました。ありがとうございました！
調べてもよくわからなかったのでご教示ください。useContextは複数のコンポーネントでデータの共有ができるという理解ですが、AuthProviderの中のchildrenはどのような意味を持つのでしょうか？（children自体は型定義関係なく親コンポーネントのJSJ内の子要素をpropsで渡せるものという理解です。）
@youtube2603
Жыл бұрын
ご質問ありがとうございます！ > AuthProviderの中のchildrenはどのような意味を持つのでしょうか？ すでにご覧になっているかもしれませんがchildrenに関しては、以下のブログが参考になると思います！ choippo.com/react-component-children/ 上記内容を踏まえた上で、今回contextを用いて複数のコンポーネントでデータの共有をするためには、それらのコンポーネントがAuthProviderにラップされている必要があります。AuthProviderにラップとは以下のようにに囲まれている状態のことです。 この際、AuthProvidrの中では、「children=」となりはに囲まれる形になるため、contextで管理している値を受け取れるようになるということです。 まだ何かわからないことがあれば、お気軽にご返信ください！
@11021300
Жыл бұрын
@@youtube2603 ありがとうございます！理解できました！
ありがとうございます。 Gitのurlがあれば教えていただけませか?
@youtube2603
2 жыл бұрын
こちらこそご視聴いただきありがとうございます！ こちらGithubへのリンクとなりますので、ご確認ください！ github.com/Naoya-abe/hooks-basic-public/tree/youtube/useContext
@weathermony7091
2 жыл бұрын
@@youtube2603 大変ありがとうございます!