Fragments?

리액트로 컴포넌트들을 만들다 보면 element들을 반드시 최상위 레벨에서 같은 parent로 묶어주어야 한다. 이 과정에서 <div> 떡칠이 되기가 쉬운데, Fragment를 사용하면 div 생성 없이 자식들을 그룹화할 수 있다.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

가령 다음과 같이 코드를 짜면 실제로 <React.Fragment> 부분에는 아무것도 생성되지 않고 자식 부분만 렌더링 된다.

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

이런 케이스라면 Columns을 div로 감싸는 순간 테이블은 작동하지 않을 것이다. 이런 경우에도 fragment를 사용해서 다음과 같이 코드를 적을 수 있다.

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

div 대신에 React.Fragment 하나만 딱 집어넣으면 된다.

Fragments 단축 문법

이것마저도 귀찮으면

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

아무것도 안써도 똑같이 작동한다. 단, key를 명시적으로 전달해야하는 경우 사용불가능하고 React.Fragment를 명시적으로 전달해야함에 조심해야한다.

출처:
https://ko.reactjs.org/docs/fragments.html