【React】Fragmentについて

実務でフロントにReactが使われていて、いずれ触ることになりそうな予感がしているので勉強しています。今回はその内容をアウトプットしていこうと思います。

Fragment

公式には「フラグメントを使うことで、DOM に余分なノードを追加することなく子要素をまとめることができるようになります。」とあります。Reactの文法ではレンダーされるHTMLは親要素を持たなければいけないという制約があります。そのため、以下のようなコードはSyntaxErrorとなります。

import React, { Fragment } from 'react';

export const Orders = () => {
  return (
    <p>Hoge</p>
    <p>Huga</p>
  )
}

これを防ぐためにはdivタグで囲うなどする必要があるのですが、そうすると余計なタグがついてしまうという問題があります。そこで登場するのがフラグメントです。

import React, { Fragment } from 'react';

export const Orders = () => {
  return (
    <Fragment>
      <p>Hoge</p>
      <p>Huga</p>
    </Fragment>
  )
}

こうすることで、余計なタグをつけることなく子要素をまとめることができます。
ちなみに空タグでも同じようにまとめることができます。

import React from 'react';

export const Orders = () => {
  return (
    <>
      <p>Hoge</p>
      <p>Huga</p>
    </>
  )
}

さいごに

Reactを触ってみましたが、やはり触りたては特に難しいですね。めげずに少しずつ勉強していこうと思います。
今日は短いですが、ここで終わります。ここまで読んでいただきありがとうございました。

ABOUT ME

sakai

三重出身の28歳。前職はメーカーで働いていて、プログラミングスクールに通って未経験からWeb業界に転職しました。Railsをメインで使っていて、AWSも少しできます。音楽を聞くこととYoutubeを見るのが好きです。最近はへきトラ劇場にハマってます

BLOG：https://sakaishun.com