【React】フラグメント

フラグメントとは？？

React でよくあるパターンの 1 つに、コンポーネントが複数の要素を返すというものがあります。フラグメント (fragment) を使うことで、DOM に余分なノードを追加することなく子要素をまとめることができるようになります。
参考：https://ja.reactjs.org/docs/fragments.html

要素を複数返すときに必要ということですね。

確認してみる

以下のプログラムはExample関数内でインクリメントした変数valueをCountPrint関数に引数として渡し、表示します

NG例

const CountPrint = ({ value }) => {
  return <div>count:{value}</div>;
};

const Example = () => {
  let value = 0;
  return (
      <CountPrint value={++value} />
      <CountPrint value={++value} />
      <CountPrint value={++value} />
  );
};

export default Example;

このようにすると

<CountPrint value={++value} />
<CountPrint value={++value} />
<CountPrint value={++value} />

でエラーが出力されます。
内容は以下の通り

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment 
<>...</>?

複数の要素を返すには囲みタグでラップしてくださいだそうだ

OK例

const CountPrint = ({ value }) => {
  return <div>count:{value}</div>;
};

const Example = () => {
  let value = 0;
  return (
    <>
      <CountPrint value={++value} />
      <CountPrint value={++value} />
      <CountPrint value={++value} />
    </>
  );
};

export default Example;

先ほどエラーが出ていた部分を<></>で囲ってあげる

<>
    <CountPrint value={++value} />
    <CountPrint value={++value} />
    <CountPrint value={++value} />
</>

• 表示結果
  

無事表示された

<>とdivどっちがいい？

フラグメントは<div></div>でも代用できるようだ

<div>
    <CountPrint value={++value} />
    <CountPrint value={++value} />
    <CountPrint value={++value} />
</div>

フラグメントより<div>の方をつかうという方もいらっしゃるようです
参考：https://zenn.dev/januswel/articles/c80ac055b72955d71d41