【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

酒井 駿

名古屋工業大学大学院卒業後、豊田合成(株)で品質管理を経験し、その後スタートアップ・マネーフォワードを経て、2024年11月に株式会社EGGHEAD創業。 製造業とエンジニアリング、両方の現場の知見を活かし、製造業における生成AIを活用した業務改善やシステム開発を支援します。

BLOG：https://blog.egghead.co.jp