[React] Fragment

📌 Fragment

컴포넌트가 렌더링될 때 실제 DOM에는 나타나지 않고 여러 요소를 그룹화하는 역할 수행

예시

import React from "react";
function App() {
  return (
    <div className="App">
      <table>
        <tr>
          <Table />
        </tr>
      </table>
    </div>
  );
}
function Table() {
  return (
    <div className="Table">
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}
export default App;

table 컴포넌트의 렌더링을 위해서 table이라는 클래스명을 가진 div로 묶어서 return
메인에서 table 컴포넌트를 import하면 최종적으로 보여지는 html

<table>
    <tr>
      <div className="Table">
          <td>Hello</td>
          <td>World</td>
      </div>
    </tr>
</table>

➡️ 의미없는 div가 추가됨
이를 피하기 위해 Fragment 사용

import { Fragment } from "react";
function Table() {
  return (
    <Fragment>
      <td>Hello</td>
      <td>World</td>
      </Fragment>
  );
}

Fragment를 import 해준 후 table을 div가 아닌 Fragment로 묶어준 후의 구조

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

<Fragment> </Fragment> 대신 <> </> 으로 사용 가능

[참고 자료]

🔗링크