(React) Fragment

Fragment

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX를 쓸 떄, Return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다.

❗️이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.

Fragment를 사용하는 이유

이는 리액트의 JSX 문법과 관련이 있다.
반드시 하나의 최상위 태그로 감싸져 있어야 하기 때문에,
컴포넌트의 랜더링을 위해서 불필요한 div 태그가 사용될 수 있다.
그렇기 때문에, Fragment를 사용하면 불필요하게 태그로 감싸져 있는 현상을 방지할 수 있다.

import { Fragment } from "react";

function Table() {
  return (
    <Fragment>
      <td>Hello</td>
      <td>World</td>
      </Fragment>
  );
}

fragment를 import 해준 후 table을 div가 아닌 fragment로 묶어준다. 그러면 html구조는 다음과 같다.

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

Fragments 사용 예시

map을 사용해서 컴포넌트를 여러개 만들 때, key attribute를 fragment에 넣어줄 수 있다.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // react는 'key'가 없으면 key warning을 발생시킨다. 
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
         </React.Fragment>
        ))}
      </dl>
    );
}

정리

프로젝트를 진행하며 의미없게 사용된 div를 fragment를 활용해서 간결하게 만들 수 있다.