1. 시멘틱한 마크업을 방해하는 최상위 요소들

컴포넌트가 여러 엘리먼트를 동시에 return 해야 할 경우 에러가 발생합니다. jsx 컴포넌트는 최상위 부모요소를 가져야 하기 때문에 보통 div 태그로 다른 태그들을 감싸주었습니다. 하지만 이렇게 코드를 작성하면 여러 개의 엘리먼트들을 감싸주기 위해서 의미 없는 div 태그를 자주 사용하게 됩니다.

function App() {
  return (
		<div>
			<h1>안녕, 라이캣 1호!</h1>
			<h2>안녕, 라이캣 2호!</h2>
		</div>
  );
}

이렇게 의미 없는 태그들을 사용하는 것은 자연스럽게 시맨틱한 마크업 작성을 방해하게 됩니다.

import React, { Fragment } from 'react';

function ListItem({ item }) {
  return (
    <div>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </div>
  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  );
}

2. Fragments

Fragements 를 사용하면 <div> 와 같은 별도의 노드를 추가하지 않고 여러 개의 자식을 감싸줄 수 있습니다.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

우선 코드 상단에 import를 통해 모듈을 추가해 주세요.

import React from 'react';

모듈을 추가했다면 아래와 같이 Fragment를 사용하여 작성해 봅시다!

function App() {
  return (
		<React.Fragment>
			<h1>안녕, 라이캣 1호!</h1>
			<h1>안녕, 라이캣 2호!</h1>
		</React.Fragment>
  );
}

Fragment 라는 키워드 대신 <> </> 를 사용할 수도 있습니다. 이때는 fragment를 사용하기 위해 React모듈을 따로 추가할 필요가 없습니다.