<aside> 💡 리액트 프래그먼트란??

</aside>

일반적으로 리액트 컴포넌트에서 두 개 이상의 자식 요소를 반환할 때, 부모 요소를 하나로 묶지 않으면 에러가 발생하기에 프래그먼트 태그를 사용한다.

프래그먼트란? 리액트에서 여러 자식요소를 하나의 부모 요소로 감싸는데 사용하는 태그이다. 이를 사용하면 추가적인 DOM 노드를 생성하지 않고 여러 요소를 그룹화 할 수 있다.

프래그먼트는 다음과 같이 사용될 수 있다.

import { Fragment } from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Fragment>
    <h1 className='hello'>안녕</h1>
    <p>리액트!</p>
  </Fragment>
);

// 축약형 

import { Fragment } from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1 className='hello'>안녕</h1>
    <p>리액트!</p>
  </>
);

이렇게 코드를 작성하면 프래그먼트가 DOM에 실제로 추가되지 않고 그 안의 자식 요소들이 부모 요소 없이 렌더링이 된다.

이를 통해 추가적인 DOM 노드를 생성하지 않고 그룹화할 수 있어 성능 및 가독성을 개선시킬 수 있다.