⭐️ React Fragment

Fragment는 React v16에 추가된 기능이고, 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 한다. 이때 fragment를 사용하면 DOM에 별도의 노드를 추가하지 않고 여러자식을 그룹화가 가능하다.

나 또한 항상 의미없이 div태그 안에 넣어서 return을 했었다. 하지만, Fragment를 사용하면 div태그를 사용하지 않아도 해결이 가능하다.

✏️ div태그 사용시 문제점

• DOM 크기가 증가해서 로딩 시간이 느려지고, 결국 페이지 속도가 늦어진다.
• 추가 노드가 생성되어 메모리 사용량이 높아진다.
• 비용이 늘어난다.
• 구형 장치에서는 html이 복잡해져 성능 문제가 발생 할 수 있다.
• 추가 노드의 출처를 디버깅하고 추적하는 것이 어려워 진다.
• 원하는 레이아웃을 유지하기 어렵다.

✏️ 일반적인 패턴
렌더링된 HTML이 유효하려면 는 여러개의 요소를 반환한다.

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

이때 의 render() 내부에 부모 div를 사용하면 렌더링된 HTML은 유효하지 않다.

class Columns extends React.Component {
 render() {
   return (
     <div>
       <td>Hello</td>
       <td>World</td>
     </div>
   );
 }
}

Table 의 출력 결과는 다음과 같이 불필요한 div태그가 table태그안에 존재하는 것을 확인할 수 있다.

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

따라서 div태그를 대신하여 React.Fragment태그를 사용하면 다음과 같이 출력된다.

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

😮 short Syntax

<React.Fragment> </React.Fragment> 대신 빈태그 <> </> 를 사용 가능하다.

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Fragment 빈태그 1</td>
        <td>Fragment 빈태그 2</td>
      </>
    );
  }
}

💡 단, key값을 줄 때 주의해야할 점이 있다.
React는 key값을 설정하지 않으면 key warning이 일어나기 때문에 Fragment태그를 직접 명시해야 한다.

function Voc(props) {
return (
  <dl>
    {props.items.map(item => (
      <React.Fragment key={item.id}>
        <dt>{item.term}</dt>
        <dd>{item.description}</dd>
      </React.Fragment>
    ))}
  </dl>
);
}

👍 장점

• Fragment는 불필요한 DOM node의 생성을 막기때문에 메모리를 적게사용한다.
• css 메커니즘에서 특별한 부모 자식관계를 가지고 있는 flexbox나 gridbox관계에 있는 엘리먼트 사이에
  를 추가하게 되면 레이아웃을 유지하기 어려워지므로 fragment를 사용하면 된다.

출처 및 참고하기 좋은 사이트

• https://velog.io/@dolarge/React-Fragment%EB%9E%80
• https://ymkmoon.github.io/React-16-Fragment/