React の Props と Children の違いをまとめてみた
今回は、React で頻繁に使われる props
と children
の違いについて、ざっくりまとめてみました。両方ともコンポーネント間でデータを渡すのに使われますが、それぞれの使い方やユースケースはちょっと違います。さっそく見ていきましょう!
Props と Children の簡単な利用例と実用的なユースケース
Props の利用例
まずは props
から。props
はコンポーネントに渡す任意のデータです。例えば、ユーザーの名前やボタンのテキスト、スタイルの設定などを渡すことができます。
const UserGreeting = (props) => { return <h1>Hello, {props.name}!</h1>; }; // 利用例 <UserGreeting name="Alice" />
この例では、UserGreeting
コンポーネントに name
というプロパティを渡しています。この name
を使って挨拶を表示しています。
Children の利用例
次に children
です。children
は、コンポーネントの中にネストされた要素やコンポーネントを指します。親コンポーネントから子コンポーネントにネストされた要素を渡すのに使います。
const Wrapper = (props) => { return <div className="wrapper">{props.children}</div>; }; // 利用例 <Wrapper> <p>This is a child component.</p> <p>Another child component.</p> </Wrapper>
この Wrapper
コンポーネントは、ネストされた p
要素を children
として受け取り、それを表示します。
ユースケースと使い分けるポイント
Props のユースケース
props
は主に以下のような場合に使います:
- コンポーネントに対してデータや設定を渡すとき
- 親コンポーネントから子コンポーネントに一方向にデータを渡したいとき
例えば、フォームの入力値やボタンの状態を親から子に渡すのに便利です。
Children のユースケース
children
は以下のような場合に使います:
- コンポーネントの中身が柔軟に変わる場合
- レイアウトやラッパーコンポーネントを作成するとき
例えば、モーダルウィンドウの中に表示する内容や、カードコンポーネントの中にネストする要素など、レイアウトを柔軟にしたい場合に便利です。
サンプルコード:モーダルコンポーネント
const Modal = (props) => { return ( <div className="modal"> <div className="modal-content"> {props.children} </div> </div> ); }; // 利用例 <Modal> <h2>Modal Title</h2> <p>This is the content of the modal.</p> <button>Close</button> </Modal>
この Modal
コンポーネントは、children
を使ってモーダルの中身を柔軟に設定しています。タイトルや内容、ボタンなどを子要素として渡しています。
サンプルコード:カードコンポーネント
const Card = (props) => { return <div className="card">{props.children}</div>; }; // 利用例 <Card> <h3>Card Title</h3> <p>Card content goes here.</p> <button>Learn More</button> </Card>
この Card
コンポーネントは、children
を使ってカードの中身を柔軟に設定しています。タイトル、内容、ボタンなどを子要素として渡しています。
使い分けるポイント
- データの受け渡し:具体的なデータ(テキスト、数値、オブジェクトなど)を渡したいなら
props
を使います。 - 柔軟なレイアウト:中身が柔軟に変わる場合や、ネストされた要素をそのまま渡したい場合は
children
を使います。
まとめ
props
と children
の使い方の違い、わかりましたか? props
はデータや設定を渡すのに使い、children
は柔軟にネストされた要素を渡すのに使います。それぞれのユースケースを理解して、適切に使い分けることで、より読みやすく再利用性の高いコンポーネントを作ることができます。ぜひ試してみてください!
これで、React の props
と children
の違いについて、ざっくりと理解できたでしょうか?もっと深掘りしたい場合は、公式ドキュメントをチェックしてみるのもおすすめです。それでは、楽しいコーディングを!