Portfolio

<>…</> 구문으로 사용하는 <Fragment>는 감싸는 노드 없이도 엘리먼트를 그룹화할 수 있게 해준다.


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

참조

`<Fragment>`

단일 엘리먼트가 필요한 상황에서 엘리먼트들을 <Fragment>로 묶어 함께 그룹화한다. <Fragment>로 엘리먼트들을 그룹화하더라도 실제 DOM에는 아무런 영향을 주지 않으며, 그룹화하지 않은 것과 동일하다. 빈 JSX 태그 <></>는 대부분의 <Fragment>의 축약 표현이다.

Props

optional key: 명시적인 <Fragment> 구문으로 선언한 Fragment에는 키를 추가할 수 있습니다.

주의사항

Fragment에 key를 전달하려는 경우 <>…</>구문을 사용할 수 없습니다.

'react' 에서 Fragment를 명시적으로 불러오고 <Fragment key={yourKey}>...</Fragment>를 렌더링해야합니다.

React는 <><Child /></>와 [<Child />] 사이, 혹은 <><Child /></>와 <Child /> 사이를 번갈아 렌더링할 때 state를 재설정하지 않습니다.(같은 deps라는 의미 = 같은 트리 위치이기 때문에 state 재설정이 일어나지 않음)

예를 들어, <><><Child /></></>에서 [<Child />]로 변경할 경우에는 state를 재설정합니다.

사용법

1. 여러 엘리먼트 반환하기

Fragment 또는 이와 동등한 구문인 <>…</>를 사용하여 여러 엘리먼트를 그룹화 합니다. 단일 엘리먼트가 들어갈 수 있는 모든 위치에 여러 엘리먼트를 배치하고자 할 때 사용할 수 있습니다.

예를 들어, 컴포넌트는 오직 하나의 엘리먼트를 반환할 수 있지만, Fragment를 사용하면 여러 엘리먼트를 그룹화하여 단일 그룹을 반환할 수 있습니다.


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

Fragment로 엘리먼트를 그룹화해도 DOM 엘리먼트처럼 다른 컨테이너로 엘리먼트를 감싸는 경우와 달리 레이아웃이나 스타일에 영향을 주지 않기 때문에 유용합니다.

브라우저 도구로 다음 예시를 검사하면 모든 <h1>과 <article> DOM 노드가 이들을 감싸는 노드 없이 형제로 표시되는 것을 볼 수 있습니다:


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

App.js

특별한 구문<></> 없이 Fragment를 어떻게 쓰나요?

위의 예제는 Fragment를 React에서 import하는 것과 동일합니다.


import { Fragment } from 'react';

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

일반적으로 Fragment에 key를 전달해야하는 경우가 아니라면 이렇게 할 필요는 없습니다.

2. 변수에 여러 엘리먼트를 할당하기

다른 엘리먼트와 마찬가지로, Fragment 엘리먼트를 변수에 할당하거나 props로 전달하는 등의 작업을 수행할 수 있습니다:


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

3. 텍스트와 함께 그룹화하기

Fragment는 텍스트를 컴포넌트들과 함께 그룹화하는데에도 사용할 수 있습니다.


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

3. 목록 렌더링하기

<></>구문 대신 명시적으로 Fragment를 작성해야 하는 상황

반복문에서 여러 엘리먼트를 렌더링하는 경우 각 엘리먼트에 key를 할당해야합니다.

반복문 내의 엘리먼트들이 Fragment라면 key 속성을 제공하기 위해 일반적인 JSX 엘리먼트 구문을 사용해야 합니다.


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


import { Fragment } from 'react';

const posts = [
  { id: 1, title: 'An update', body: "It's been a while since I posted..." },
  { id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
];

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

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

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

<Fragment> (<>)

참조

<Fragment>