Programming

React Fragmentを活用しよう!!

Reactは最近フロントエンドのJavaScriptのライブラリやフレームワークで一番人気と言っても過言でないくらい流行っているライブラリです。

WEB系の開発には様々なライブラリやフレームワークなどをうまく組み合わせることで開発速度をあげたり管理しやすくしたりします。そのため使い方を覚えるのに非常に勉強コストがかかったりするので、使い方をサクッと学べるような記事を書いていきます。

今回紹介したいのは、ReactのFragmentという機能です!!

Fragmentとは

Fragmentとは、JSXのコード上で複数タグをまとめるだけのReact専用のタグです。
Reactでは基本JSXという書式でコーディングしていきます。その時に発生する問題が複数のタグをreturnできないことです。

従来では、<div>タグを使っていたがネストが深くなるので<Fragment>タグの機能を使うようになった。

コードでイメージを掴む

複数のタグをreturnしたい(このコードはエラー)
    return (
      <Header/>
      <h1>Hello World</h1>
      <Footer/>
    );

そこで従来では、<div> (意味のないタグ)でくくってreturnすることでComponentのDOMを返してきました。

しかしそれだとソースコードとして表示した時に<div>(意味のないタグ)が複数含まれてしまって構造のネストが深くなってしまってわかりにくくなります。

<div>でくくるのはエラーはでないけどムダがある。
    return (
      <div>
        <Header/>
        <h1>Hello World</h1>
        <Footer/>
      </div>
    );

そこで複数のタグをまとめてくれる(<div>の上位互換の)<Fragment>というタグを使うようにすることが推奨されています。

Fragmentを使った書き方
    return (
      <Fragment>
        <Header/>
        <h1>Hello World</h1>
        <Footer/>
      </Fragment>
    );

宣言の仕方

Fragmentは少し加えるだけで終わり。

// import React, { Component } from 'react';
// ↓[Fragment]を加える
import React, { Component, Fragment } from 'react';

これだけです。

まとめ

Fragmentとは
  • Reactの複数タグをまとめる機能
  • 従来の<div>の代わりに使っていく
  • 宣言する時に少し加えるだけで使える!

いっぱい使っていきましょう!