Qraft(クラフト) 資格・学習クイズアプリ

React入門 練習問題 36:状態管理:プロパティの受け渡し

Reactにおいて、深くネストされたコンポーネントへ直接データを渡し、中間のコンポーネントを経由する「Props Drilling(バケツリレー)」を避けるための標準機能として正しいものはどれか。

  1. Context APIを使用して、プロバイダから直接データを提供する。
  2. React Routerを使用して、URLパラメータにデータを含めて渡す。
  3. Error Boundaryを使用して、エラー情報とともにデータを渡す。
  4. React Portalsを使用して、DOM階層を無視してデータを渡す。
  5. StrictModeを使用して、コンポーネント間のデータのやり取りを行う。

Qraftユーザーの成績:難易度 Bランク(レーティング1218)・正答率 57%(8/14回正解)
レーティングは解いた人の実力と正誤から算出する難しさ(初期値1200)。ランクはその全問題中の順位(S+が最難関、F-が最易)

正解と解説を見る
正解:Context APIを使用して、プロバイダから直接データを提供する。

深くネストされたコンポーネントへ直接データを渡すための機能は、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は開発環境での潜在的な問題を検知するためのツールである。

← 前の問題問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)