JSX 파일 규칙상 return 시 하나의 태그로 묶어야한다.

이런 상황에 Fragment를 사용하면 쉽게 그룹화가 가능하다.

아래와 같이 Table 컴포넌트에서 Columns를 불렀다고 가정해보자

import Columns from '../Components';

function Table() {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
    </table>
  );
}

export default Table;

Columns 컴포넌트에서는 <td> ~~ </td> 와 같은 element를 반환해야 유효한 테이블 생성이 가능할 것이다. 여러 td 태그를 작성하기 위해 div 태그로 묶었다.

(JSX 파일 규칙상 return 시 하나의 태그로 묶어야한다.)

function Columns() {
  return (
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}

export default Columns;

이제 Table 컴포넌트에서 DOM 트리를 그렸을 때 어떻게 결과가 나오는지 확인해보자

Columns 컴포넌트에서 div 태그로 묶어서 Table 컴포넌트로 보냈기 때문에 문제가 발생한다. 따라서 JSX 파일의 return 문을 무조건 div 태그로 묶는 것이 바람직하지 않을 수 있다.

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

이때 사용할 수 있는 문법이 바로 Fragment 이다.

*div 태그 대신에 Fragment 로 감싸주면 문제가 해결된다. Fragment는 DOM 트리에 추가되지 않기 때문에 정상적으로 Table을 생성할 수 있다.*

function Columns() {
  return (
    <Fragment>
      <td>Hello</td>
      <td>World</td>
    </Fragment>
  );
}

export default Columns;

*Fragment 로 명시하지 않고, 빈 태그로도 가능하다.*