ReactのFragmentの書き方

Fragmentとは

Reactコンポーネントは、ルートの要素が1つでないといけない。
だがそのために<div>など不要なDOMで囲むのは良くない。

例えば、以下のColumnsコンポーネントのルート要素が<div>だったらHTMLとして良くない（レーブルタグにdivを使ってはいけないから）。

<table>
  <tr>
    <Columns />
  </tr>
</table>

このように不要なDOMを書くことは極力避けたい。
ではルートに複数の要素がある場合はどうすれば良いのか？
そこで登場するのがFragmentである。

Fragmentの書き方3つ

１つ目：<React.Fragment>

import { Fragment } from 'react';

export const Columns = () => {
  return (
    <React.Fragment>
      <td>A</td>
      <td>B</td>
    </React.Fragment>
  )
}

２つ目：<Fragment>

import React from 'react';

export const Columns = () => {
  return (
    <Fragment>
      <td>A</td>
      <td>B</td>
    </Fragment>
  )
}

３つ目：<>

import { Fragment } from 'react';

export const Columns = () => {
  return (
    <>
      <td>A</td>
      <td>B</td>
    </>
  )
}

１つ目はいつ使うのか

1つ目の<React.Fragment>は長ったらしいだけに見えるが、唯一keyを持つことができる。
keyを持たせたいときは<React.Fragment>を使おう。