Fragments
These docs are old and won’t be updated. Go to react.dev for the new React docs.
These new documentation pages teach modern React:
React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴입니다. Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다.
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}이를 선언하는 새로운 단축 문법이 있습니다.
동기
컴포넌트가 여러 자식을 반환하는 것은 흔한 패턴입니다. 다음 React 예시를 보세요.
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}렌더링 된 HTML이 유효하려면 <Columns />가 여러 <td> 엘리먼트만 반환해야 합니다. <Columns />의 render() 안에 부모 div로 자식들을 감싼다면 렌더링 된 HTML은 유효하지 않습니다.
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}<Table />의 출력 결과는 다음과 같습니다.
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>Fragments는 이 문제를 해결해줍니다.
사용법
class Columns extends React.Component {
render() {
return (
<React.Fragment> <td>Hello</td>
<td>World</td>
</React.Fragment> );
}
}올바른 <Table />의 출력 결과는 아래와 같습니다.
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>단축 문법
Fragments를 선언하는 더 짧고 새로운 문법이 있습니다. 마치 빈 태그와 같습니다.
class Columns extends React.Component {
render() {
return (
<> <td>Hello</td>
<td>World</td>
</> );
}
}key 또는 어트리뷰트를 지원하지 않는다는 것을 빼고 다른 엘리먼트처럼 <></>을 사용할 수 있습니다.
key가 있는 Fragments
Fragments에 key가 있다면 <React.Fragment> 문법으로 명시적으로 선언해야 합니다. 예를 들어 정의 목록을 만들기 위해 컬렉션을 fragments 배열로 매핑하는 사용 사례입니다.
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>
);
}key는 Fragment에 전달할 수 있는 유일한 어트리뷰트입니다. 추후 이벤트 핸들러와 같은 추가적인 어트리뷰트를 지원할 수도 있습니다.
라이브 데모
CodePen에서 새로운 JSX fragment 문법을 사용해 볼 수 있습니다.