❄️ 참고자료
React 공식문서 Fragments
DogHujup [React 공식 Advanced Doc] Fragment
DEV React Fragment VS Div
Stackoverflow Why are Fragments in React 16 better than container divs?
React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴이다. 반드시 상위 노드로 감싸주어 그룹을 만들어야 하지만 Fragmet
를 사용하면 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다.
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
☃️ Fragments 사용 전
다음 예시 코드를 보자!
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
렌더링 된 HTML이 유효하려면 <Columns/>
가 여러 <td>
엘리먼트만 반환해야 한다. 그러기 위해선 <div>
로 자식들을 감싸주어야 하는데 이러면 HTML의 <table>
은 유효하지 않게 된다.
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
☃️ Fragments 사용 후
위에서 발생하는 에러는 Fragment
를 이용하여 해결할 수 있다.
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
☃️ Fragments 단축 문법 사용 후
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
🥰 장점
😭 단점
단점 부분은 혹시 몰라서 원문을 가져왔다..!
무슨 말인지 모르겠고 헷갈린다면 아래에 있는 원문을 보는 것을 추천한다. (❁´◡`❁)
📌 stackoverflow
Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout while extracting logical components.