[react 번역] <Fragment> (<>...<>)

출처: https://react.dev/reference/react/Fragment

개요

<Fragment>(혹은 <>...</>)는 여러 요소를 래퍼 DOM 노드 없이 그룹화할 수 있게 해주는 React 컴포넌트입니다. 레이아웃이나 스타일에 영향을 주지 않고 여러 요소를 묶고 싶을 때 사용합니다.

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

Reference

`<Fragment>`

여러 요소를 하나로 그룹화해야 할 때 <Fragment>로 감쌀 수 있습니다. Fragment로 그룹화해도 실제 DOM에는 아무런 래퍼가 추가되지 않습니다. 빈 태그(<>...</>)는 <Fragment></Fragment>의 축약형입니다.

Props

key(선택): <Fragment>를 명시적으로 사용할 때만 key를 지정할 수 있습니다. <>...</> 축약형에서는 key를 쓸 수 없습니다.

Caveats

key를 전달하려면 반드시 <Fragment key={...}>...</Fragment>처럼 명시적으로 작성해야 합니다.
<><Child /></>와 [<Child />] 간 전환, 혹은 <><Child /></>와 <Child /> 간 전환에서는 state가 유지됩니다. 다만, 중첩된 Fragment의 경우에는 동작이 다를 수 있습니다.

사용법

여러 요소 반환하기

컴포넌트가 여러 요소를 반환해야 할 때 Fragment로 감싸면 됩니다.

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

Fragment로 감싸면 DOM에 불필요한 래퍼가 추가되지 않습니다.

여러 요소를 변수에 할당하기

function CloseDialog() {
  const buttons = (
    <>
      <OKButton />
      <CancelButton />
    </>
  );
  return (
    <AlertDialog buttons={buttons}>
      정말로 이 페이지를 떠나시겠습니까?
    </AlertDialog>
  );
}

텍스트와 컴포넌트 그룹화하기

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

리스트에서 Fragment에 key 할당하기

import { Fragment } from 'react';

const posts = [
  { id: 1, title: '업데이트', body: '오랜만에 글을 씁니다...' },
  { id: 2, title: '새 블로그', body: '새로운 블로그를 시작합니다!' }
];

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

반복문에서 Fragment에 key를 할당하려면 반드시 <Fragment key={...}>...</Fragment>로 작성해야 합니다.

Deep Dive: 축약형 없이 Fragment 쓰기

import { Fragment } from 'react';

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