Fragment 와 <></>

React에서 하나의 컴포넌트는 여러 element를 반환하기 때문에 JSX블록은 반드시 하나의 태그로 감싸져야 한다.
가상돔의 변화를 감지하기 위해서 트리구조를 만들기 위해서 인데, 반복적으로 사용될 컴포넌트들을 div태그 등으로 감싸게 되면 불필요한 태그들이 반복되게 된다.
이럴때 사용하는 것이 Fragment이다.

Fragment 혹은 React.Fragment는 JSX블록을 그룹화 하는 역할을 수행하는 동시에 컴포넌트가 렌더링 될 때 DOM에는 출력되지 않는다.

다음과 같은 상황이 있을때

return (
  <section>
    <Header />
    <Content />
    <Footer />
  </section>
);

Content

{items.map(item => (
  <div key={item.id}>
    <p>{item.content}</p>
  </div>
))}

이 내용의 출력은

<section>
  <Header />
  <div>
    <p>content1</p>
  </div>
  <div>
    <p>content2</p>
  </div>
  <div>
    <p>content3</p>
  </div>
  <div>
    <p>content4</p>
  </div>
  <div>
    <p>content5</p>
  </div>
  <Footer />
</section>

이처럼 수많은 div태그가 쌓이게 된다.

이때 Fragment를 사용하게 된다면
Content

{items.map(item => (
  <React.Fragment key={item.id}>
    <p>{item.content}</p>
  </React.Fragment>
))}

<section>
  <Header />
    <p>content1</p>
    <p>content2</p>
    <p>content3</p>
    <p>content4</p>
    <p>content5</p>
  <Footer />
</section>

불필요한 내용이 없어지게 된다.

단축문으로는 <></> 가 있고, 단축문은 key를 지정 할 수 없기 때문에 map등의 반복문에서는 Fragment태그를 명시하여 사용하는 것이 바람직하다.

<>
  <div>{...}</div>
</>

{items.map((item,index)=> (<React.Fragment key={index}>
...
</React.Fragment>)}

{items.map((item,index)=> (<Fragment key={index}>
...
</Fragment>)}