Propsとコンポジション

目標: props でデータを渡し、デフォルト値を設定し、小さなコンポーネントをコンポジションして UI を構築します。

• props でコンポーネントにデータを渡します。
• 単純な分割代入でデフォルト値を設定します。
• コンポジションと children スロットを使います。

Props は読み取り専用の入力です。親が子をレンダリングして値を渡し、子はパラメーターから値を読み取ります。

• props を変更してはいけません。
• 親の state や props が変わると再レンダリングが発生します。

パラメーターリストで分割代入を使うと、props にデフォルト値を設定できます: function Card({ title = "Untitled" })。

• コンポーネントの堅牢性が保たれます。
• マークアップ内で undefined を確認する必要がなくなります。

コンポジションとは、小さな要素（children やスロット）から大きな UI を構築することです。柔軟性と明確なデータフローを保つため、継承よりもコンポジションを優先します。

例: props を渡し、デフォルト値を設定し、シンプルなカードレイアウト内で children をコンポジションします。

プレゼンテーションコンポーネントはレイアウトと見た目に焦点を当てます。再利用しやすいよう、可能な限り props によって動作し、state を持たない設計にします。

• 小さな API（props のみ）にします。
• クラスでスタイルを適用し、隠れた副作用を避けます。

まとめ: props でデータを渡し、安全なデフォルト値を設定し、children をコンポジションして柔軟で再利用可能な UI を構築します。継承ベースの階層構造は避けます。