React Fragment란?

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환 합니다.

 

리액트를 사용하기 위한 문법인 JSX를 사용할 때 return 문안에는 반드시 하나의 최상위 태그가 있어야 합니다. 이는 ReactDom.createRoot(document.getElementById('root'))에서 하나의 루트 요소만 가지고 있기 때문입니다.

 

index.js 파일

 

 

만일 이러한 내용을 어기고 두개 이상의 최상위 태그가 생기면 아래와 같은 에러가 발생하게 됩니다.

 

그런데 이러한 문제를 해결하기 위해 단순히 감싸는 용도로 div 태그를 사용하게 되면 추후에 앱이 느려지는 이유 중 하나가 될 수 있습니다.

처음에는 그 양이 적어 괜찮겠지만 앱이 점점 커지면서 문제가 되기 때문에 처음부터 이런 감점 요소를 잡고 가는 게 좋다고 생각합니다.

그러기 위해 사용하는 태그가 React.Fragment입니다.

Fragment로 감싸게 되면 실제 HTML 요소를 DOM에 렌더링 하지 않고 태그가 생성되게 됩니다.

 

Fragment 사용법

Fragment를 사용하는 방법은 총 두가지가 있습니다.

 

첫 번째 원하는 태그에 React.Fragment 작성하기

 

두 번째 Fragment를 import해서 간단하게 Fragment만 작성해서 사용하기 

 

 

그럼 이제 정말 Fragment를 사용하게 되면 Dom 요소에  렌더링 하지 않게 되는지 확인을 해보겠습니다.

먼저 div 태그를 최상위 태그로 반환 했을 때 입니다.

사진 오른쪽에 클래스 이름에 Fragment 실험중이라는 내용이 보이는 내용처럼 HTML 태그를 사용하게 되면 사진처럼 Dom에 렌더링이 되기 때문에 단순히 감싸는 역할로 사용하게 되면 문제가 될수 있습니다!

 

그렇다면 Fragment로 감싸게 되면 어떡해 될까요?

상위 태그가 사라지고 root 태그가 상위 태그로 자리잡게 되었습니다!

이처럼 단순히 감싸는 역할을 하는 태그는 Fragment 태그로 감싸주는 것이 가장 좋습니다.

 

 

그리고 Fragement 외에도 <></>빈 태그 또한 Fragment와 같은 역할을 합니다. 하지만 아직 지원하지 않는 곳이 많으니 Fragment를 사용하는 것을 권해 드립니다.