React - 프래그먼트(Fragments)

프래그먼트는 Reaxt에서 여러 개의 요소를 그룹화 할 때 사용되는 빈 태그이다.

보통 JSX에서는 반드시 하나의 부모 요소가 있어야 하는데

이때 불필요한 div 태그를 추가하지 않고도 여러 요소를 그룹화할 수 있도록 도와준다.

 

JSX에서는 반드시 하나의 부모 요소가 필요하다고 이전 글에서 설명했는데

다시한번 복습하자면

// 잘못된 태그 (부모 태그 없이 여러 요소 반환)
return (
   <h1>안녕하세요</h1>
   <p>반가워요</p>
 );
 

// 올바른 태그 (부모 태그로 감싸기)
return (
   <div>
     <h1>안녕하세요 </h1>
     <p>반가워요</p>
   </div>
 );

이렇게 JSX에서는 여러 개의 요소를 감싸는 부모 태그가 반드시 필요하다.

하지만 <div> 태그가 필요 이상으로 많아지게 되면 복잡해지고

CSS 스타일링에 영향을 줄 수있다.

이 문제를 해결하기위해 프래그먼트(fragment)를 사용하여 div를 제거할 수 있다.

import { Fragment } from "react"

return (
  <Fragment>
    <h1>안녕하세여</h1>
    <p>어서오세요</p>
  </Fragment>
 );

이렇게 불필요한 div 태그가 추가되지 않고

부모 요소 없이 여러 개의 JSX 요소를 반환할 수 있다는 장점이 있다.

하지만 이 방법보다 더 간결하게 사용할 수 있는 문법이 있다.

바로 <>...</> 문법인데 React에서 프래그먼트를 더 간결하게 사용할 수 있도록

축약된 문법을 제공한다

return (
  <>
    <h1>안녕하세용</h1>
    <p>어서오세용</p>
  </>
);

완전히 같은 결과지만 코드가 더 짧아지고 간결하다는 장점이 있다.

조금 더 자세하게 들어가보자

---

프래그먼트가 유용한 경우의 예시가 여러가지 있지만 

몇 가지 설명해보자면..

 

1. 리스트 랜더링에서 불필요한 div를 제거할 때

리스트를 랜더링할 때 프래그먼트를 사용하면 불필요한 div가 추가되지 않아 DOM이 더 깔끔해진다.

다음 예씨를 살펴보자

 

 - div 태그를 사용한 경우

const items =["사과", "바나나", "포토"];

return (
  <div>
    {items.map((item,index) => {
     <div key ={index}>
      <p>{item}</p>
     </div>
   ))}
  </div>
 );

위와 같이 div가 여러 개 추가되면 DOM이 불필요하게 복잡해질 수 있다.

 

- 프래그먼트 사용한 경우

const items =["사과", "바나나", "포토"];

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

프래그먼트를 사용하면 불필요한 div가 제거됨으로써

좀 더 최적화된 가벼운 DOM 구조를 유지할 수 있다.

 

2. CSS 스타일링 충돌 방지

불필요한 div를 추가하면 예상치 못한 CSS 스타일 충돌이 발생할 수 있다.

 

- div 사용으로 스타일 문제가 발생한 경우

const Box = () => (
  <div className="box">
    <h1>제목</h1>
    <p>설명</p>
  </div>
);

const Container = () => (
  <div className="container">
    <Box />
  </div>
);

위와 같이 .container와 .box의 스타일이 겹칠 수 있다.

 

- Fragment 사용으로 스타일 충돌 방지한 경우

const Box = () => (
  <>
    <h1>제목</h1>
    <p>설명</p>
  </>
);

위와 같이 불필요한 div가 없어 스타일이 깔끔해진다.

 

3. 테이블 <table> 안에서 사용

JSX에서는 <table> 내부에 <div>를 넣을 수 없지만

프래그먼트를 사용하면 <table>을 쓸 수 있다.

 

- table 내에서 div를 사용하여 오류가 발생한 경우

return (
  <table>
    <tr>
      <div>
        <td>이름</td>
        <td>나이</td>
      </div>
    </tr>
  </table>
);

위와 같이 tr 안에 div를 넣으면 HTMl 규칙에 위반된다.

 

- table 내에서 프래그먼트 사용한 경우

return (
  <table>
    <tr>
      <>
        <td>이름</td>
        <td>나이</td>
      </>
    </tr>
  </table>
);

위와 같이 HTML 규칙을 유지하면서도 JSX에서 여러 요소를 반환할 수 있다.

---

JSX를 정리하면 다음과 같디.

• JSX에서는 반드시 하나의 부모 태그가 필요하지만,
  불필요한 div를 만들지 않기 위해 프래그먼트를 사용한다.
• <Fragment>...</Fragment> 또는 <>...</>(축약형) 문법을 사용할 수 있다.
• 프래그먼트는 리스트 랜더링, <table>, 스타일 충돌 방지등에 유용하게 사용된다.
• DOM 구조를 더 가볍고 깔끔하게 유지할 수 있다.