React - Fragment란?

Fragment

• Fragment는 React v16에 추가된 기능
• 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 한다. 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다.

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

렌더링 된 Table 컴포넌트가 유효하려면 <Columns />가 여러 <td>엘리먼트를 반환해야 한다.

div 사용 시

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

그런데 위와 같이 <Columns />가 <td />를 <div>로 감싸서 반환한다면 실제 dom tree는 아래와 같이 구성될것이다.

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

이렇게 구성된 html은 유효하지 않다.

Fragment 사용 시

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

<Columns />가 <td />를 <React.Fragment>로 감싸서 반환한다면 Fragment는 dom에 추가되지 않기때문에 실제 dom tree는 아래와 같이 구성될것이다.

<table>
  <tr>
      <td>Hello</td>
      <td>World</td>
  </tr>
</table>

short syntax

short syntax는 아래와 같이 빈 태그를 적어주는것인데

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

이 방식을 사용하면 편리하기는 하지만 tag에 attributes나 key를 적어줄 수 없다.

그리고 현재 Fragment에 전달할 수 있는 유일한 어트리뷰트는 key이다. (공식문서에는 추후 이벤트 핸들러와 같은 추가적인 어트리뷰트를 지원할 수도 있다고 명시되어 있다.)

장점

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