[에러 해결] JSX expressions must have one parent element.

에러 상황

React 기반 화면 UI 구현 중 아래 에러 메시지 확인

에러 메시지

JSX expressions must have one parent element.

에러 원인

- JSX 문법에서 Component가 여러 개 있다면 반드시 parent element로 감싸야 하는데 그렇지 않아서 발생한 이슈

- Component 내부는 하나의 DOM Tree 구조로 이루어져야 한다는 규칙을 따라야 함

해결책

간단하게 div 태그 또는 fragment 태그  또는 중괄호{}로 여러 Component를 감싸는 parent element를 사용하면 쉽게 해결 가능

해결책 예시1: div 태그

<div>
     <ComponentExample1/>
     <ComponentExample2/>
     ...
</div>

해결책 예시2: fragment 태그

<fragment>
     <ComponentExample1/>
     <ComponentExample2/>
     ...
</fragment>

해결책 예시3: 태그명 생략가능

<>
     <ComponentExample1/>
     <ComponentExample2/>
     ...
</>

---

포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요.

고맙습니다 :)