리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX를 쓸 떄, Return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다.
❗️이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.
이는 리액트의 JSX 문법과 관련이 있다.
반드시 하나의 최상위 태그로 감싸져 있어야 하기 때문에,
컴포넌트의 랜더링을 위해서 불필요한 div 태그가 사용될 수 있다.
그렇기 때문에, Fragment를 사용하면 불필요하게 태그로 감싸져 있는 현상을 방지할 수 있다.
import { Fragment } from "react";
function Table() {
return (
<Fragment>
<td>Hello</td>
<td>World</td>
</Fragment>
);
}
fragment를 import 해준 후 table을 div가 아닌 fragment로 묶어준다. 그러면 html구조는 다음과 같다.
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
map을 사용해서 컴포넌트를 여러개 만들 때, key attribute를 fragment에 넣어줄 수 있다.
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>
);
}
정리
프로젝트를 진행하며 의미없게 사용된 div를 fragment를 활용해서 간결하게 만들 수 있다.