[React] 의미 없는 container, Fragment

React에서 생성한 컴포넌트들은 반드시 하나의 컴포넌트 또는 element에 포함되어 있어야 한다. 예를 들어

function Component() {
  return (
    <div>foo</div>
    <span>bar</span>
  );
}

위와 같은 코드는 컴파일 시 오류를 반환한다.
Component 컴포넌트가 반환하는 element가 하나가 아니기 때문.
그래서 종종 의미 없이 div element로 반환할 내용을 모두 감싸는 경우가 있었다.

return (
  <div>
    <div>foo</div>
    <span>bar</span>
  </div>
);

하지만 쓸모 없는 element를 만들어야 한다는 점에서 상당히 마음에 들지 않는 야매식 해결방법이라는 느낌을 강하게 받았는데, React에는 실제로 이 문제를 해결하기 위한 기능이 있다.
Fragment 라는 React 기본 컴포넌트는 이런 상황에서 모든 element 및 component들을 포함하는 container의 용도로 사용할 수 있다.

//파일 최상단
import { Fragment } from 'react';

...

return (
  <Fragment>
    <div>foo</div>
    <span>bar</span>
  </div>
);

위 코드에서 Fragment component는 DOM에 render되는 과정에서 완전히 사라지며, 단순히 React의 작동 방식에 의해 생기는 오류를 방지하고자 필요한 의미 없는 Container이다.