React에서 빈 태그 추가 없이 다중 엘리먼트를 래핑하는 방법

리액트는 루트 요소에 엘리먼트가 하나가 있어야 한다.

<div>one</div>
<div>two</div>

이런 식에 요소 정의는 안된다. 그래서

<div>
  <div>one</div>
  <div>two</div>
</div>

이렇게 빈 태그를 추가하여 루트요소에 하나도 오도록 조정한다.

그런데 빈 요소 추가는 불필요한 리소스 낭비이기 때문에 실제 랜더링할 때는 나오지 않도록 리엑트에서 래핑 컴포넌트를 제공한다.

<React.Fragment>
  <div>one</div>
  <div>two</div>
</React.Fragment>