[React] Fragments 란?

기존 문제점: <td>를 <div>로 감쌀 시 렌더링된 HTML은 유효하지 않는다. 

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

class Columns extends React.Component {
  render() {
    return (
      <div> // 자식요소인 <td>를 div로 묶어 주게 된다면
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

// <Table />의 출력 결과

<table>
  <tr>
    <div> // div로 자식들을 감싼다면 렌더링 된 HTML은 유효하지 않는다.
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

 

 

Fragment 사용방법

 

// 첫번째 방법
<React.Fragment>
</React.Fragment>


// 두번째 방법(import하기)
import React, { Fragment } from 'react'
<Fragment>
</Fragment>


// 세번째 방법(단축키) :단점- key 사용을 못함.
<>
</>

장점

1. Fragment는 불필요한 DOM node의 생성을 막기때문에 메모리를 적게사용한다.
2. css 메커니즘에서 특별한 부모 자식관계를 가지고 있는 flexbox나 gridbox관계에 있는 엘리먼트 사이에 <div>를 추가하게 되면 레이아웃을 유지하기 어려워지므로 fragment를 사용하면 된다.