React JSX로 인해 불필요한 div 로 감싸는 상황일 때 Fragments를 사용하자!

<리엑트 로고>

React JSX 특징 중 하나로, 아래와 같은 특징이 있습니다.

React 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하기 때문에 반드시 부모 요소 하나가 감싸는 형태여야 한다.

리액트 JSX 기반으로 개발된 프로젝트들을 보면 위 내용으로 인해, 아무런 의미 없이 <div> 태그를 남발하는 상황이 나타나게 된다. 이러한 경우 아래와 같은 단점들이 생기게 된다.

1. 불필요한 DOM node 생성으로 불필요한 메모리를 잡아먹는다
2. CSS Flexbox 및 Grid로 작업할 때 레이아웃이 깨질 수 있다
3. HTML 특정 구조(ul > li, table > tr > td)에 잘못된 HTML 구조가 발생할 수 있다

이러한 이유들로 우리는 React의 Fragments를 적극적으로 활용해야 합니다.

👉 Fragments 사용법

위에서 설명한 세 번째 단점을 적용한 예제를 통해서 한번 알아보자.

const ParentComponent = () => {
  return ( 
    <table>
      <tbody>
        <tr>
          <ChildComponent />
        </tr>
      </tbody>
    </table>
  )
};

const ChildComponent = () => {
  return (
    <div>
      <td>사과</td>
      <td>오렌지</td>
    </div>
  )
};

이때 테이블 구조는 아래와 같다.

<Fregments 예제 HTML 구조>

위에서 HTML 구조를 보면 table > tbody > tr > div > td 구조로 만들어 지는 것을 확인할 수 있다.
이 문제점을 해결하기 위해 Fragments를 사용해보자!

import { Fragment } from "react";

const ParentComponent = () => {
  return ( 
    <table>
      <tbody>
        <tr>
          <ChildComponent />
        </tr>
      </tbody>
    </table>
  )
};

const ChildComponent = () => {
  return (
    <React.Fragment>
      <td>사과</td>
      <td>오렌지</td>
    </React.Fragment>
  )
};

🖐 여기서 잠깐!

Fragments는 추가적으로 단축 문법이 있어 아래와 같이 생략하여 사용할 수 있다. 주의해야할 점은 Fragments에 key가 있다면 <React.Fragment> 문법으로 명시적으로 선언해줘야 한다.

현재 Fragments에서 유일한 어트리뷰트는 key이며, React 공식 문서에는 추후 이벤트 핸들러, 추가 어트리뷰트를 지원 예정이라고 합니다.

const ChildComponent = () => {
  return (
    <>
      <td>사과</td>
      <td>오렌지</td>
    </>
  )
};

그럼 이제 내가 원하는 구조가 되었는지 확인해 보자!

<Fregments 예제 HTML 구조>

Fragments를 사용하였더니 내가 원하는 구조인 table > tbody > tr > td 구조로 만들어지는 것을 확인할 수 있다.

오늘은 리엑트 Fragments의 사용법에 대해서 알아보았다.
언제나 피드백은 환영입니다.

긴글 읽어주셔서 감사합니다.
모두 해피 코딩하세요~