[React] Fragment 문법을 왜 쓸까

Develop/React.js

dawonny 2023. 4. 26. 02:10

728x90

React 에서 JSX 를 사용할 때 return 문에는 무조건 최상위 태그가 존재해야한다.

React 는 하나의 컴포넌트만을 return 할 수 있기 때문이다.

이때, Fragment 라는 걸 사용할 수 있는데

이는 불필요한 div, span 등의 HTML 요소 없이 여러 개의 자식 요소를 렌더링 할 수 있도록 하는 기능이다.

Fragment 를 사용하면 컴포넌트의 여러 요소를 그룹화할 수 있다.

예를 들어 App() 에 Table() 이라는 컴포넌트를 넣어서 사용하고 싶은 경우를 생각해보자.

Table 컴포넌트는 다음과 같다.

function Table() {
  return (
    <div className="Table">
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}

여기서 Table 컴포넌트 내의 태그들을 묶기 위해 최상위 태그로 div 를 사용했다.

그러면 최종 main 에서 보여지는 html 은 다음과 같을 것이다.

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

만약 저기서 의미없는 div가 추가되는 것이 싫다면 React.Fragment 를 사용할 수 있다.

만약 Table 컴포넌트를 아래와 같이 작성한다면 최종 html 에서 div 를 지울 수 있다.

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

최종 html 을 보자

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

HTML 요소가 불필요 하게 추가되지 않아, 불필요한 마크업이 생성되는 것을 방지하고

DOM 의 불필요한 크기를 줄일 수 있음을 확인할 수 있다.

<Fragment> <Fragment/> 라고 쓸 수도 있겠지만

<> </> 처럼 Fragment 를 생략하고 사용할 수도 있다.

결론적으로, Fragment 를 사용하는 이유는

불필요한 HTML 요소를 줄이기 위해서라고 볼 수 있겠다.

실제로 React Fragment 를 사용해본다면 전체적인 코드를 봤을 때

필요없어보이는 div 태그를 지움으로써 좀 더 코드가 간결해보일 수 있겠다는 생각을 했다.

잘 익혀두고 필요할 때 활용해보자!

728x90