<>...</> 구문으로 자주 사용되는 <Fragment>로 wrapper 노드 없이 요소를 그룹화할 수 있음.

<>
  <OneChild />
  <AnotherChild />
</>

---

Reference

<Fragment>

단일 요소가 필요한 상황에서 요소들을 <Fragment>로 묶어 그룹화할 수 있음. Fragment 안에서 요소들을 그룹화해도 최종 DOM에는 영향을 미치지 않으며, 요소들을 그룹화하지 않은 경우와 동일함. 대부분의 경우 빈 JSX 태그 <></>는 <Fragment></Fragment>의 축약어임.

Props

• key (optional): 명시적인 <Fragment> 구문으로 선언된 Fragment는 key를 가질 수 있음.

Caveats

• Fragment에 key를 전달하려면 <>...</> 구문을 사용할 수 없음. 명시적으로 'react'에서 Fragment를 import 해서 <Fragment key={yourKey}>...</Fragment>를 렌더링해야 함.

• React는 <><Child /></>를 [<Child />]로 변경하거나 그 반대의 경우에, 그리고 <><Child /></>를 <Child />로 변경하거나 그 반대의 경우에 state를 리셋하지 않음. 이는 한 단계 깊이에서만 작동함. 예를 들어 <><><Child /></></>를 <Child />로 변경하면 state가 리셋됨.

  • 참고: 리액트의 상태 유지

---

Usage

Returning multiple elements

여러 요소들을 그룹화하려면 Fragment 또는 이와 동등한 <>...</> 구문을 사용할 것. 이를 사용하면 단일 요소가 들어갈 수 있는 모든 위치에 여러 요소들을 넣을 수 있음. 예를 들어, 컴포넌트는 하나의 요소만 반환할 수 있지만 Fragment를 사용하면 여러 요소들을 그룹화해서 하나의 그룹으로 반환할 수 있음:

function Post() {
  return (
    <>
      <PostTitle />
      <PostBody />
    </>
  );
}

Fragment를 사용하여 요소들을 그룹화하는 것은 DOM 요소와 같은 다른 컨테이너로 요소를 감싸는 것과 달리 레이아웃이나 스타일에 영향을 주지 않기 때문에 유용함. 브라우저 도구로 다음 예시를 살펴보면 모든 <h1> 및 <article> DOM 노드가 wrapper가 없는 형제 노드로 표시되는 것을 확인할 수 있음:

export default function Blog() {
  return (
    <>
      <Post title="An update" body="It's been a while since I posted..." />
      <Post title="My new blog" body="I am starting a new blog!" />
    </>
  )
}

function Post({ title, body }) {
  return (
    <>
      <PostTitle title={title} />
      <PostBody body={body} />
    </>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

DEEP DIVE: How to write a Fragment without the special syntax?

위의 예제는 React에서 Fragment를 import 하는 것과 같음:

import { Fragment } from 'react';

function Post() {
  return (
    <Fragment>
      <PostTitle />
      <PostBody />
    </Fragment>
  );
}

Fragment에 key를 전달해야 하는 경우가 아니라면 보통은 필요하지 않음.

Assigning multiple elements to a variable

다른 요소와 마찬가지로, Fragment 요소를 변수에 할당하거나 props로 전달하는 등의 작업을 수행할 수 있음:

function CloseDialog() {
  const buttons = (
    <>
      <OKButton />
      <CancelButton />
    </>
  );
  return (
    <AlertDialog buttons={buttons}>
      Are you sure you want to leave this page?
    </AlertDialog>
  );
}

Grouping elements with text

Fragment를 사용하여 텍스트를 컴포넌트와 함께 그룹화할 수 있음:

function DateRangePicker({ start, end }) {
  return (
    <>
      From
      <DatePicker date={start} />
      to
      <DatePicker date={end} />
    </>
  );
}

Rendering a list of Fragments

다음은 <></> 구문을 사용하는 대신 Fragment를 명시적으로 작성해야 하는 상황. 루프에서 여러 요소를 렌더링할 때는 각 요소에 key를 할당해야 함. 루프 내의 요소가 Fragment인 경우 key attribute를 제공하려면 일반 JSX 요소 구문을 사용해야 함:

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

DOM을 검사하면 Fragment 자식 주변에 wrapper 요소가 없는 것을 확인할 수 있음.