📚 Reference

• 공식 문서 1
• 공식 문서 2

📜 Chapter

‣

JSX

React.Fragments

• React.Fragments
• Fragments
• <Fragment>
• <> </>

<> </>

div 태그, Fragments - 비교

• div 태그 대신에 Fragments를 사용해야 하는 이유
  • 빠르다. (Fast)
    • div 엘리먼트는 DOM에서 node를 만들고 약간의 공간을 차지한다. 그러나 React Fragments는 절대로 DOM에서 node를 만들지 않고 어떠한 공간도 차지 하지 않기 때문에 앱 속도가 약간 더 빨라진다.
    • Div element creates a node in DOM and occupy some space but React Fragments never creates any node in DOM and never occupy any space which makes the app tiny bit faster.
  • 덜 복잡한 DOM (Less cluttered DOM)
    • 중첩된 div가 많으면 DOM이 커지고 읽거나 디버깅하기 어렵지만 Fragment를 사용하면 DOM을 보고 디버깅하는 것이 훨씬 쉬워진다.
    • Having lots of nested div makes the DOM large and hard to read or debug but with Fragments, DOM becomes a little easy to look at and debug.

예시

• 예시 1

<>
  <OneChild />
  <AnotherChild />
</>