※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【React】Fragmentの利用方法・メリットについて詳しく解説

react web開発 javascript フロント開発 TypeScript JSX Fragment 空タグ <>

投稿日：2021年2月6日

Reactでは複数の要素を返したい場合Fragmentタグを使用することで無駄なdivタグを削除することができます。

はじめに

Reactではコンポーネントとして複数の要素を返したい場合、以下のようにそのまま書くことができません。

エラーが出てしまう

import React from "react";

const SampleComponent : React.FC = () : JSX.Element =>{
    return (
        <div>Mars</div>
        <div>quai</div>
    )
}

発生するエラー

[Error] JSX expressions must have one parent element.

JSXの表現がトランスパイル後にどのようなコードになるのかが理解できている人にとっては当然のエラーでしょう（ここでは詳しい説明は省きます）。

このエラーを回避するために、複数の要素を入れる場合には必ず一つのタグの中に入れる必要があります。

適当にdivタグで包んでしまってもいいのですが…

Reactにはこのような場合のためにFragmentというタグが用意されています。

React.Fragment

Fragmentについて

このタグは機能を持たないタグです。

以下のように複数タグをJSXで返したい場合に使用します。

import React from "react";


const SampleComponent = ()  =>{
    return (
        <React.Fragment>
            <div>Mars</div>
             <div>quai</div>
        </React.Fragment>
    )
}

コンポーネントの返し値として以外にも、map()関数で複数要素を返したい場合にもよく使います。

const SampleComponent = ()  =>{
    return (
        <React.Fragment>
            {sampleArray.map((i, key) => {
                return (
                    <React.Fragment key={key}>
                        <div>Hello!!</div>
                        <div>{i}</div>
                    </React.Fragment>
                )
            })}
        </React.Fragment>
    )
}

map()関数で返している要素の中でFragmentにkeyをpropsとして渡しています。

keyはFragmentが受け取れる唯一のpropsです。

空のタグ

Fragmentは空のタグ<></>として書くことができます。

ただし、keyを渡す場合には空のタグは使えないことに注意しましょう。

const SampleComponent = ()  =>{
    return (
        <>
            {sampleArray.map((i, key) => {
                return (
                    <React.Fragment key={key}>
                        <div>Hello!!</div>
                        <div>{i}</div>
                    </React.Fragment>
                )
            })}
        </>
    )
}

メリット１：メモリ使用率

React.Fragmentには特徴があり、普通のタグを使用するよりメモリ使用率が少し低かったりします。

実際にFragmentとdivでメモリ使用率を比較したところ、Fragmentよりdivのほうが1.5倍メモリを使用していました。

大量の情報が含まれたArrayなどをmapでレンダリングする場合などには、必ずFragmentを使用しましょう。

メリット２：セレクターの指定

FragmentはHTMLにレンダリングされる際には存在しない仮のメソッドです。

そのためFlexboxやGridなどのCSSスタイルを利用する際に、構造を壊さず利用できます。

記事へのコメント

【React】Fragmentの利用方法・メリットについて詳しく解説

はじめに

React.Fragment

Fragmentについて

空のタグ

メリット１：メモリ使用率

メリット２：セレクターの指定

検索

カテゴリ

Web開発

機械学習

プログラミング

その他

サーバー開発

Linux

目次