[React] <> </> Fragments

1. Fragments의 필요성

---

React는 하나의 태그만 반환할 수 있다.

여러 element를반환하기 위해서는 하나의 부모 태그로 그룹을 묶어야한다.

 

의미 없는 태그를 사용하기 위해 <div> 태그를 많이 이용하는 편이지만 여기 그보다 좋은 태그가 있다.

 

바로 Fragment 태그다.

Fragments는 다른 DOM 노드를 사용하지 않고 그룹화지을 수 있다.

---

더군다나 테이블 예제에서도 코드를 간결하게 만들어준다.

<div>
  <td>Minda</td>
  <td>Yeeeh</td>
</div>

이런 간단한 테이블을 만들때도 상위 div로 인해 유효하지 않는 결과가 나온다.

따라서 다음과 같이 작성해야하는데,

<table>
  <tr>
    <div>
      <td>Minda</td>
      <td>Yeeeh</td>
    </div>
  </tr>
</table>

Fragments를 사용하면 <div> 태그와 달리 이런 불편함을 간소화시킬 수 있다.

return (
  <React.Fragment>
    <td>Minda</td>
    <td>Yeeeh</td>
  </React.Fragment>
);

 

2. 사용법

---

무엇보다 이 태그의 정수는 단축용법에 있다.

이 태그는, 마치 빈 태그처럼 사용할 수 있다!

 

<> </>

물론 Fragment는 키나 속성을 지원하지 않는 특징이 있지만,

그 외의 상황에서는 불필요한 div 태그 남발을 줄일 수 있다.

 

위의 예시 태그도 다음과 같이 축약할 수 있다.

return (
  <>
    <td>Minda</td>
    <td>Yeeeh</td>
  </>
);

 

cf.

Fragments – React