未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

React の Props と Children の違いをまとめてみた

React の Props と Children の違いをまとめてみた

今回は、React で頻繁に使われる propschildren の違いについて、ざっくりまとめてみました。両方ともコンポーネント間でデータを渡すのに使われますが、それぞれの使い方やユースケースはちょっと違います。さっそく見ていきましょう!

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 を使います。

まとめ

propschildren の使い方の違い、わかりましたか? props はデータや設定を渡すのに使い、children は柔軟にネストされた要素を渡すのに使います。それぞれのユースケースを理解して、適切に使い分けることで、より読みやすく再利用性の高いコンポーネントを作ることができます。ぜひ試してみてください!

これで、React の propschildren の違いについて、ざっくりと理解できたでしょうか?もっと深掘りしたい場合は、公式ドキュメントをチェックしてみるのもおすすめです。それでは、楽しいコーディングを!