2.2.1 하나의 루트 요소로 반환하기

JSX로 작성된 컴포넌트는 반드시 하나의 태그(요소)만 반환해야 합니다. 예를 들어 다음 코드는 2개의 <div> 태그를 나란히 반환해 오류가 발생합니다.

잘못된 코드: 두 개 이상의 루트 요소 반환

<div>첫 번째 영역</div>
<div>두 번째 영역</div>

기본적인 해결 방법은 2개의 태그를 하나의 부모 요소로 감싸는 것입니다.

올바른 코드: 하나의 루트 요소 반환

<div>
  <div>첫 번째 영역</div>
  <div>두 번째 영역</div>
</div>

하지만 이 방법은 <div> 같은 불필요한 태그가 추가되기 때문에 실제 HTML 구조가 복잡해질 수 있고, CSS로 스타일을 적용할 때 문제가 생길 수 있습니다.

이럴 때 리액트에서 제공하는 프래그먼트를 사용할 수 있습니다. 프래그먼트(Fragment)는 여러 요소를 하나로 묶어주는 가상의 태그입니다. 실제 HTML에는 아무것도 렌더링되지 않기 때문에 불필요한 태그가 추가되지 않습니다.