React Fragment とは何で、なぜ使うのですか？

Question

Accepted Answer

component は **single root element** を返す必要がありますが、そのルールを満たすためだけに余分な wrapper `

` を追加したくないことがよくあります（flex/grid のような CSS layout や、table のような HTML 構造を壊すことがあります）。**Fragment** は DOM node を追加せずに children をまとめます。 ```jsx function TableRow() { return ( <> {/* Fragment — DOM に余分な element を生成しない */} Name Email ); } ``` ここで代わりに `

` を使うと、不正な HTML（`

…`）になり、table が壊れます。Fragment は 2 つの `` だけを render します。 ## short syntax と full syntax ```jsx <>... // short syntax（最も一般的） // full syntax — key を渡す必要があるときに使う ... ``` **fragment の list** を render する場合は full form を使います。short `<>` は `key` を受け取れないためです。 ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## なぜ重要なのか Fragment は DOM を clean に保ち（不要な wrapper div を増やさない）、semantic/layout-sensitive な構造を壊さず、node 数も少し減らします。しかも runtime cost はありません。