React入門 練習問題 36:状態管理:プロパティの受け渡し
Reactにおいて、深くネストされたコンポーネントへ直接データを渡し、中間のコンポーネントを経由する「Props Drilling(バケツリレー)」を避けるための標準機能として正しいものはどれか。
- Context APIを使用して、プロバイダから直接データを提供する。
- React Routerを使用して、URLパラメータにデータを含めて渡す。
- Error Boundaryを使用して、エラー情報とともにデータを渡す。
- React Portalsを使用して、DOM階層を無視してデータを渡す。
- StrictModeを使用して、コンポーネント間のデータのやり取りを行う。
Qraftユーザーの成績:難易度 Bランク(レーティング1218)・正答率 57%(8/14回正解)
レーティングは解いた人の実力と正誤から算出する難しさ(初期値1200)。ランクはその全問題中の順位(S+が最難関、F-が最易)
正解と解説を見る
深くネストされたコンポーネントへ直接データを渡すための機能は、Context APIが正解です。
【正解の理由】
Context APIを使用すると、プロバイダ(Provider)と呼ばれるコンポーネントから、ツリーの奥深くにあるコンポーネントへ直接データを提供できます。これにより、中間のコンポーネントが不要なpropsをバケツリレーのように渡す手間(Props Drilling)を省くことができます。
【不正解の理由】
• 「React Routerを使用して、URLパラメータにデータを含めて渡す」は誤り。React Routerは画面遷移(ルーティング)のためのライブラリであり、コンポーネント階層のデータ伝達には適さない。
• 「Error Boundaryを使用して、エラー情報とともにデータを渡す」は誤り。Error BoundaryはUIのクラッシュを防ぐためのエラーハンドリング機能である。
• 「React Portalsを使用して、DOM階層を無視してデータを渡す」は誤り。Portalsは子要素を親コンポーネントのDOM階層外にレンダリングする機能であり、データ受け渡しの仕組みではない。
• 「StrictModeを使用して、コンポーネント間のデータのやり取りを行う」は誤り。StrictModeは開発環境での潜在的な問題を検知するためのツールである。