| title | <Fragment> (<>...</>) | ||
|---|---|---|---|
| translators |
|
<Fragment>, often used via <>...</> syntax, lets you group elements without a wrapper node.
종종 <>…</> 구문으로 사용하는 <Fragment>는 감싸는 노드 없이도 엘리먼트를 그룹화할 수 있게 해줍니다.
<>
<OneChild />
<AnotherChild />
</>Wrap elements in <Fragment> to group them together in situations where you need a single element. Grouping elements in Fragment has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag <></> is shorthand for <Fragment></Fragment> in most cases.
단일 엘리먼트가 필요한 상황에서 엘리먼트들을 <Fragment>로 묶어 함께 그룹화합니다. <Fragment>로 엘리먼트들을 그룹화하더라도 실제 DOM에는 아무런 영향을 주지 않으며, 그룹화하지 않은 것과 동일합니다. 빈 JSX 태그 <></>는 대부분의 <Fragment>의 축약 표현입니다.
- optional
key: Fragments declared with the explicit<Fragment>syntax may have keys. 선택적key: 명시적인<Fragment>구문으로 선언한 Fragment에는 키를 추가할 수 있습니다.
-
If you want to pass
keyto a Fragment, you can't use the<>...</>syntax. You have to explicitly importFragmentfrom'react'and render<Fragment key={yourKey}>...</Fragment>. Fragment에 key를 전달하려는 경우<>…</>구문을 사용할 수 없습니다.'react'에서Fragment를 명시적으로 불러오고<Fragment key={yourKey}>...</Fragment>를 렌더링해야합니다. -
React does not reset state when you go from rendering
<><Child /></>to[<Child />]or back, or when you go from rendering<><Child /></>to<Child />and back. This only works a single level deep: for example, going from<><><Child /></></>to<Child />resets the state. See the precise semantics here. React는<><Child /></>와[<Child />]사이, 혹은<><Child /></>와<Child />사이를 번갈아 렌더링할 때 state를 재설정하지 않습니다. 이는 한 단계 깊이에서만 작동합니다. 예를 들어,<><><Child /></></>에서[<Child />]로 변경할 경우에는 state를 재설정합니다. 여기에서 정확한 의미를 확인하세요.
Use Fragment, or the equivalent <>...</> syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:
Fragment 또는 이와 동등한 구문인 <>…</>를 사용하여 여러 엘리먼트를 그룹화 합니다. 단일 엘리먼트가 들어갈 수 있는 모든 위치에 여러 엘리먼트를 배치하고자 할 때 사용할 수 있습니다. 예를 들어, 컴포넌트는 오직 하나의 엘리먼트를 반환할 수 있지만, Fragment를 사용하면 여러 엘리먼트를 그룹화하여 단일 그룹을 반환할 수 있습니다.
function Post() {
return (
<>
<PostTitle />
<PostBody />
</>
);
}Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all <h1> and <article> DOM nodes appear as siblings without wrappers around them:
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>
);
}How to write a Fragment without the special syntax? 특별한 구문 없이 Fragment를 작성하는 방법은 무엇입니까? {/how-to-write-a-fragment-without-the-special-syntax/}
The example above is equivalent to importing Fragment from React:
위의 예제는 Fragment를 React에서 import하는 것과 동일합니다.
import { Fragment } from 'react';
function Post() {
return (
<Fragment>
<PostTitle />
<PostBody />
</Fragment>
);
}Usually you won't need this unless you need to pass a key to your Fragment.
일반적으로 Fragment에 key를 전달해야하는 경우가 아니라면 이렇게 할 필요는 없습니다.
Assigning multiple elements to a variable 변수에 여러 엘리먼트를 할당하기 {/assigning-multiple-elements-to-a-variable/}
Like any other element, you can assign Fragment elements to variables, pass them as props, and so on: 다른 엘리먼트와 마찬가지로, Fragment 엘리먼트를 변수에 할당하거나 props로 전달하는 등의 작업을 수행할 수 있습니다:
function CloseDialog() {
const buttons = (
<>
<OKButton />
<CancelButton />
</>
);
return (
<AlertDialog buttons={buttons}>
Are you sure you want to leave this page?
</AlertDialog>
);
}You can use Fragment to group text together with components:
Fragment는 텍스트를 컴포넌트들과 함께 그룹화하는데에도 사용할 수 있습니다.
function DateRangePicker({ start, end }) {
return (
<>
From
<DatePicker date={start} />
to
<DatePicker date={end} />
</>
);
}Here's a situation where you need to write Fragment explicitly instead of using the <></> syntax. When you render multiple elements in a loop, you need to assign a key to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the key attribute:
다음은 <></>구문 대신 명시적으로 Fragment를 작성해야하는 상황입니다. 반복문에서 여러 엘리먼트를 렌더링하는 경우 각 엘리먼트에 key를 할당해야합니다. 반복문 내의 엘리먼트들이 Fragment라면 key 속성을 제공하기 위해 일반적인 JSX 엘리먼트 구문을 사용해야합니다.
function Blog() {
return posts.map(post =>
<Fragment key={post.id}>
<PostTitle title={post.title} />
<PostBody body={post.body} />
</Fragment>
);
}You can inspect the DOM to verify that there are no wrapper elements around the Fragment children: DOM을 검사하여 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>
);
}