[React] React.Fragment

React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴이다.

Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있다.

function App (){
  return (
    <Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </Fragment>
  );
}
export default App

Fragment는 위 코드블록에서 처럼 사용할 수 있으며 새로운 단축문법도 있다.

function App (){
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
export default App

위 코드 블록처럼 Fragment라는 단어를 빼고 빈 태그만 넣어도 사용 가능하다.

 

만약 key가 있다면 이 역시 명시적으로 선언해줘야한다.

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>
  );
}