Reactでdivdivする問題をReact.Fragmentで解決する

#JSXの記法
JSXファイルはreturnに1つのタグしか持てないというルールがあります。
そのため、以下のようにリストを２つ並べようとすると、2つのulタグをreturnが持つことになり、

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
		<ul>
			<li>Coke</li>
			<li>Soda</li>
			<li>Orange Juice</li>
		</ul>
		<ul>
			<td>Hamburger</td>
			<td>Fries</td>
			<td>Salad</td>
		</ul>
	);
  }
}

export default App;

以下のようにエラーになってしまいます。

Adjacent JSX elements must be wrapped in an enclosing tag

#余計なdivタグ

これを回避するためによく使われるのは、
以下のようにdivタグで全体を囲って1つの要素を返すようにする記法です。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
		<div>
			<ul>
				<li>Coke</li>
				<li>Soda</li>
				<li>Orange Juice</li>
			</ul>
			<ul>
				<li>Hamburger</li>
				<li>Fries</li>
				<li>Salad</li>
			</ul>
		</div>
	);
  }
}

export default App;

しかし、この記法だと余計なdivタグが入ってしまいます。実際、開発ツールで確認すると
rootのdiv要素を開いたらさっき書いたdivが出てきてdivdivしちゃってぱっと見づらいですね。
要素が増えてくるとdivをいちいち一つ一つ開けないと中身がみれないので不便です。

#divタグの代わりにReact.Fragmentを使う

そこで便利なのがdivではなく、React.Fragmentを用いる記法です。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
		<React.Fragment>
			<ul>
				<li>Coke</li>
				<li>Soda</li>
				<li>Orange Juice</li>
			</ul>
			<ul>
				<li>Hamburger</li>
				<li>Fries</li>
				<li>Salad</li>
			</ul>
		</React.Fragment>
	);
  }
}

export default App;

React.Fragmentはそれ自体に意味を持たないので、開発ツールでは表示されません。したがって、rootの下にulタグが2つあるのが一目でわかり、画面に2つのリストが表示されていることと直感的にも合います。

#結論
JSXのルール（1つしか要素返せない）に従うためだけのdivはReact.Fragmentに変えて可読性を高めよう！

#補足
React.Fragmentは1つしか要素返せないJSXのルールに対して、コードの構造を保つために作られたものです。そのため、divタグとは別物です。例えばReact.FragmentにclassNameを指定したり、styleを指定することはできません。そういう使い方をしたいときは普通にdivを使いましょう。

#参考
https://ja.reactjs.org/docs/fragments.html
https://stackoverflow.com/questions/49069746/workaround-to-add-classname-to-fragment-in-react