React.Fragmentの使いどころ

はじめに

Reactを触ることになって、初めて知ることだらけ。
技術用語がまだスッと入って来ず、先輩から何度か説明してもらい、手を動かし、記事を読んでやっとふわっと理解したので一応記事にしておく。
ほぼほぼ自分用のメモなので、説明が足りないところがあったり間違ってるところがあったらごめんなさい。

React.Fragmentってなに

Reactではrenderメソッドのreturnの中身は一つの要素でないといけないらしい。
要素が並列で並んでしまう場合に <React.Fragment> を使うとHTMLタグとして生成されずに親要素として機能してくれる。

使い所と使い方

return (
  <ul>
    <li>hoge</li>
    <li>hoge</li>
  </ul>
)

これは<ul>の1要素だから <React.Fragment> は不要！
<ul> のなかに <li> がたくさんあるけどまとめなくて平気なの？と思ったが、<li> は <ul> の子要素だから <ul> 1つの要素として見られる。

---

return (
  hogeリスト
  <ul>
    <li>hoge</li>
    <li>hoge</li>
  </ul>
)

続いてこちらは "hogeリスト" という文字列要素と、 <ul>要素が並列で存在しているのでエラーとなってしまう。

Reactでは、そんな時に <React.Fragment> を使って1つの要素としてまとめることができる。

2つになっちゃたのを1つのものとするためにサ○ンラップで包んであげるイメージ。
早速やってみる。

return (
  <React.Fragment>
    hogeリスト
    <ul>
      <li>hoge</li>
      <li>hoge</li>
    </ul>
  </React.Fragment>
)

これで、 という1要素に収まった。

ん？ 待てよ。それなら <div> で囲んであげても同じように親要素としてまとめてあげることはできるぞ...と思ったが、それだとHTMLに不要な <div>タグが生成されてしまった。
そこで <React.Fragment> を使うことで、親要素としての役目を果たしつつ、HTMLタグは生成されなくなった。 便利！

Reactのお作法を守るためだけに使うことができるから、<React.Fragment> を使うと良い。