Reactで複数のタグを使いたい時

未だにFlagmentの省略した書き方してない人もいると思うので書き残しておきます。

Flagmentってなに？

JSXのreturnでは、一つの要素しか返しちゃいけないルールがあるので何かのタグでくくらないといけないんだけど<div>を使うと無駄な<div>があちこちで発生してしまうため、Flagmentってもので記述をするやり方。
確かclassとか属性値も普通の要素のように割り当てられるんじゃなかったかな？(適当な記憶)

全体を<div>で囲むのは遅れてる。

昔のコードをみると<div>で囲っているコードよくありますよね。それしかできなかったんだから仕方ないです。でも今は、もっといい方法があるので覚えておいてください。

const Sample = () => {
  return(
    <div>
      <h1>Hello World</h1>
      <p>サンプルコード</p>
    </div>
  );
};
export default Sample;

なぜダメなのか

無駄な<div>を生成しちゃうから

<React.Flagment>のコード

<div>の次に考えられたのが<React.Flagment>でコンポーネントを囲む方法。
これで記述すれば無駄な<div>コードを生み出さなくていい少しだけ全体的にネストが浅くなるはずです。

const Sample = () => {
  return(
    <React.Fragment>
      <h1>Hello World2</h1>
      <p>サンプルコード2</p>
    </React.Fragment>
  );
};
export default Sample;

なぜダメなのか

記述が長い。いちいち<React.Flagment>なんて書いてられないよ...。

本当は、<>これでいいんだよ

結論は、これ。
これは、<React.Flagment>を省略しただけの書き方
最近React Hooksの公式ドキュメント見たときも使われていたし
ガンガンこれ使っちゃっていいと思う。

const Sample = () => {
  return(
    <>
      <h1>Hello World3</h1>
      <p>サンプルコード3</p>
    </>
  );
};
export default Sample;

これで終わりです。
Happy hacking!😆