React.Fragment의 다양한 형태

React.Fragment

Fragment는 React에서 여러 요소를 그룹화하여 하나의 부모 요소 없이 렌더링할 수 있게 하는 기능이다. 일반적으로 JSX에서 여러 요소를 반환할 때 하나의 부모 요소로 감싸야 하는데, 이 때 불필요한 DOM 노드가 추가되는 것을 방지하기 위해 사용된다. 이러한 Fragment에 대해선 다양한 형태의 사용 방법이 있다.

Fragment

가장 일반적인 사용법이다. 주요 특징은 key 값을 지정할 수 있다는 것과 컴포넌트의 구조가 가시적으로 보인다는 것이다.

import React, { Fragment, FC } from 'react';

const MyComponent: FC = () => {
  return (
    <Fragment>
      <h1>Title</h1>
      <p>Description</p>
    </Fragment>
  );
};

export default MyComponent;

<> ~~ </>

태그 사이에, 아무값도 기재하지 않고 사용하는 방법도 있다. 단, key값을 따로 지정할 수 없다는 특징이 있다.

import React, { FC } from 'react';

const MyComponent: FC = () => {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
};

export default MyComponent;

key 값을 지정할 수 없기에, 배열 형태로 리턴되는 컴포넌트는 <Fragment /> 컴포넌트를 사용하여 키값을 지정하도록 해야 한다.

import React, { Fragment, FC } from 'react';

const ItemList: FC<...> = ({ items }) => {
  return (
    <div>
      {items.map(item => (
        <Fragment key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </Fragment>
      ))}
    </div>
  );
};

export default ItemList;

'react/jsx-runtime' 에서 가져오는 Fragment

import { Fragment } from 'react/jsx-runtime';

function MyComponent() {
  return (
    <Fragment>
      <div>First element</div>
      <div>Second element</div>
    </Fragment>
  );
}