React Fragment란?

  Fragment = "조각" / "파편" / "단편"

  여러 개의 조각(요소)들을 하나로 묶어주지만, 그 자체는 실체가 없는 "투명한 그룹"이라는 의미이다.

 

React에서 return은 하나의 루트 요소만 반환할 수 있다.

그렇기에 불필요한 DOM 노드 없이 여러 요소를 그룹화하기 위해서

 

 <React.Fragment>의 축약 문법인 <> <./>  으로 표현하며 Fragment를 사용한다.

 

  // ❌ 에러 - 형제 요소 2개 반환 불가
  return (
    <h1>제목</h1>
    <p>내용</p>
  )



  //  Fragment 사용
  return (
    <>
      <h1>제목</h1>
      <p>내용</p>
    </>
  )
  
  
  
  // 전체 문법
  <React.Fragment>
    <h1>제목</h1>
    <p>내용</p>
  </React.Fragment>

  // 축약 문법 (더 많이 사용)
  <>
    <h1>제목</h1>
    <p>내용</p>
  </>

 

<div>	<> </> (Fragment)
실제 DOM에 <div>가 생성됨	DOM에 아무것도 생성 안됨
불필요한 노드 추가	깔끔한 DOM 구조 유지