✅ 운영체제 : Windows 11
Fragments
❄️ 참고자료
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>
</>
);
}장/단점
🥰 장점
- 코드의 가독성이 좋아진다.
- 전체적인 MARKUP dom이 감소된다.
- render 성능 향상 및 메모리 overhead가 감소된다. (즉, 메모리 사용량 감소)
😭 단점
- Flexbox와 Grid같은 일부 CSS 기능에서 logical componets를 추출하는 동안 원하는 레이아웃을 유지가 어렵다.
단점 부분은 혹시 몰라서 원문을 가져왔다..!
무슨 말인지 모르겠고 헷갈린다면 아래에 있는 원문을 보는 것을 추천한다. (❁´◡`❁)
📌 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.
