【React】childrenへの理解を整理してみた

今日からReactの勉強記録をつけていこうと思います。

不定期更新にはなりますが、学びになる内容になるように更新を続けていけたら嬉しいです。

今日の作業内容

今日はReactのchildrenについて学習しました。

勉強前の理解

ゴロー

childrenか、随分前に勉強したけど、あまりわかってないかも。いや、かもじゃないかも😂

調べてみる

それではchildrenの勉強を始めていきます。

childrenとは

まずは、childrenとは何かを調べました。

ほうほう、そうなのねと。

では、childrenの前にまずはpropsについて調べてみましょう。

propsを調べてみたところ、Reactを学ぶというページに以下の説明がありました。

React コンポーネントは互いにやりとりをする際に props というものを使います。親コンポーネントは子コンポーネントに props を渡すことで情報を伝えることができるのです。props は HTML の属性と似ていると思われるかもしれませんが、props ではオブジェクトや配列、関数などのあらゆる JavaScript の値を渡すことができます。

https://ja.react.dev/learn/passing-props-to-a-component

読んでみると、

childrenはpropsの一種

childrenとは何か？

では、childrenとは一体何なのかを調べていきます。

ここで、コンポーネントの中身とは何かについて、疑問が生まれました。

実際にコードを見てみるとわかりやすいかと思います。

以下は親コンポーネントです。

親コンポーネント（呼び出している側）

function App() {
  return (
    <Card>
      <h2>タイトル</h2>
      <p>説明文</p>
      <button>クリック</button>
    </Card>
  );
}

Cardコンポーネントの開始タグと終了タグの間にh2タグ、pタグ、buttonタグがありますね。

これが今回のコンポーネントの中身です。

childrenとは、以下のように子コンポーネントに渡すことができる仕組みです。

子コンポーネント（呼び出されている側）

function Card({ children }) {
  return (
    <div>
      {children}
    </div>
  );
}

Cardコンポーネントにchildrenというpropsで渡して、divの中のchildrenの部分に表示することができます。

表示するのは、先述した、h2タグ、pタグ、buttonタグです。

もちろん、渡すのはdivなど他のタグも設定できます。

なぜchildrenを使うのか

では、なぜchildrenを使うのかについて調べていきます。

レイアウトと中身を分けるため

Card は枠（レイアウト）だけを担当し、中身は親コンポーネントが決めます。

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <h2>タイトル</h2>
  <p>説明文</p>
</Card>

childrenを使うことにより、

レイアウトを再利用できて、
中身は自由に変更できます。

コンポーネントを柔軟にするため

childrenを使わない場合、渡せる内容をあらかじめ想定する必要があります。

<Card title="タイトル" text="説明文" />

しかしchildrenを使えば、

渡せる内容を限定しなくて、
想定外のUIにも対応できます

ネスト（入れ子）構造を自然に書ける

childrenを使うことで、HTMLと同じように入れ子構造を書けます。

<Card>
  <Article>
    <Comment />
  </Article>
</Card>

コンポーネントの構造がそのままコードに表れるため、
直感的で読みやすい記述が可能になります。

まとめると、

childrenを使うことで、コンポーネントは「見た目の枠」だけを担当し、中身は親コンポーネントに任せることができる。これによって、再利用性と柔軟性の高い設計が可能になります。

疑問

childrenについて少しずつわかってきましたが、

またここで疑問が生まれてきました。

疑問①：propsはPタグなど長い文章は渡せないの？

propsはPタグなど長い文章は渡せないの？という疑問です。

答えとしては、

普通のpropsでも渡せます。childrenじゃないと渡せないわけではない。
でも、childrenの方が自然に書ける。

コードを見てみましょう。

<Card content={<p>こんにちは</p>} />

function Card({ content }) {
  return <div className="card">{content}</div>;
}

このコードでも動きます。

でも、少し読みにくくないですか？可読性というやつでしょうか。

childrenの書き方の方が自然といえますね。

疑問②：childrenはchildとかに変えても問題ない？

では、childrenではなく、childにしたらどうなるんでしょうか。

つまり、childrenとpropsの名前が固定されるかという疑問です。

答えとしては、

children は「名前が固定された特別な props」なので、固定です。

childにしたら、childrenとは認識されません。

普通のpropsは自分で名前を決めますよね？

でも、childrenは、Reactが自動でchildrenという名前のpropsに入れてくれるということです。

propsの名前をchildに変えたら、childrenを受けとることはできません。

ただし、受け取る側で分割代入するときに名前は変えられます。

例えば以下のコードのようにです。

function Card({ children: content }) {
  return <div>{content}</div>;
}

まとめ

今日はReactのchildrenについて、勉強しました。

また明日も勉強を継続したいです。