JSX expressions must have one parent element 오류 해결법 : <React.Fragment>

JSX expressions must have one parent element.

이 오류는, JSX에서는 표현식(expression)이 하나의 부모 요소(parent element)로 감싸져 있어야 하기 때문에 발생한다.

 

이 오류의 가장 간단한 해결 방법은 <React.Fragment>나 빈 <div> 태그를 사용하는 방법이다.

 

<React.Fragment>는 React에서 여러 개의 자식 요소를 하나의 그룹으로 묶어주는 데 사용되는 특수한 컴포넌트이다. JSX에서 여러 요소를 반환하려고 할 때는 부모 요소가 필요한데, <React.Fragment>를 사용하면 추가적인 DOM 노드를 생성하지 않으면서 요소를 그룹화할 수 있다.

 

<React.Fragment> 컴포넌트는 일반적으로 다음과 같이 사용된다.

<React.Fragment>
  {/* 자식 요소들 */}
</React.Fragment>

 

또는 축약형으로 <>와 </> 태그로 표현할 수도 있다.

<>
  {/* 자식 요소들 */}
</>

 

즉, <React.Fragment>는 JSX를 작성할 때 여러 개의 요소를 부모 요소 없이 그룹화할 수 있는 방법을 제공한다. 이는 화면에 실제 DOM 노드를 추가하지 않으면서 불필요한 추가 계층을 생성하지 않을 수 있어서 성능적으로도 유리한 점이 있다.

 

<React.Fragment>가 <div>보다 좋은 이유는 다음과 같다.

1. 추가 불필요한 노드 생성을 피할 수 있음: <React.Fragment>를 사용하면 추가적인 DOM 노드를 생성하지 않으면서 여러 개의 요소를 그룹화할 수 있음. 이는 불필요한 DOM 노드를 추가로 생성하지 않아 메모리 소비와 렌더링 성능을 향상시킬 수 있다.
2. 스타일 적용에 유용: <React.Fragment>를 사용하면 추가적인 스타일이나 레이아웃 영향을 주지 않고 컴포넌트를 그룹화할 수 있음. 때로는 요소들을 <div>로 감싸면 스타일이나 레이아웃에 영향을 주게 될 수 있다.
3. DOM 구조 유지: <React.Fragment>를 사용하면 불필요한 추가 계층을 생성하지 않고 원하는 DOM 구조를 유지할 수 있음. 반면에 <div>로 요소를 감싸면 DOM 구조가 변경될 수 있음.

 

컴포넌트 구조나 스타일링에 따라 <div>가 더 적합한 경우도 있으니 상황에 맞게 선택해야 한다.