React Context の使い方

ここでは、Context API の使い方を説明します。

なるべくベタな書き方から始めて、コンテキスト、プロバイダ、コンスーマ、ステートなどが、それぞれどんな役割をしているか明らかにしていきます。 最後にはカスタムフックを用いた、比較的新しい書き方を紹介します。

• React Context とは？
  • なぜ Context を使うの？
  • Context API で登場するモノと役割
  • Provider と Consumer の基本的な実装方法
• React Context API を使う簡単な例
  • React プロジェクトの作成
  • Context の作成と Provider の実装
  • Consumer の実装
• useState フックを用いてステートにデータを置く
  • useState フックを用いてデータをステートに配置するよう Provider を書き換える
  • Consumer の名前の変更
• useState フックでデータを更新する Provider と Consumer を実装する
  • Provider に state 更新用のメソッドを渡す
  • データ更新可能な Consumer の実装
• useContext フックで Consumer をリファクタリングする
• カスタムフックで Context をエクスポートしないようリファクタリングする