Fragments

React.Fragments

과업을 진행하면서 낯선 컴포넌트를 발견했다.

import React from "react";

...
return (
  <React.Fragment>
...
  </React.Fragment>
)

구글링을 해보니 공식 문서에서 다음과 같이 설명한다.

React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴입니다. Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다.

React에서 컴포넌트는 여러 자식을 가진 하나의 부모 태그를 반환하는 패턴이다.
예시 코드를 살펴보자

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

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

공식 문서의 예시 코드를 살펴보면 Table 컴포넌트가 Columns 컴포넌트를 자식으로 가지고 있고,
이 Columns 컴포넌트는 맥락상 HTML <td> 태그만 반환해야 한다,
하지만 리액트 컴포넌트에서 return하는 태그는 하나의 부모 태그로 묶여있어야 한다.
현재 Column 컴포넌트에서 <div> 태그로 <td> 태그를 감쌌기에 유효하지 않다.

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

Fragments는 이 문제를 해결해준다.

사용법

앞서 설명하였듯이 React 컴포넌트는 하나의 부모 태그로 감싼 형태를 return해야한다.
그러다 보니 맥락상 맞지않는 태그를 사용하는 경우가 있다.
이럴 때, Fragments를 사용해준다.

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

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

앞선 예시코드에서 Colums의 <div>태그를 <React.Fragment>로 대체 하였다.

• 결과

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

<React.Fragment>를 이용해 각 컴포넌트에서 부모 태그로 감싸기 위해 불필요한 태그를 추가하지 않아도 된다.
<React.Fragment>는 <></>의 형태로 단축하여 사용 가능하다.

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

문서를 확인하고 안심이 됐다.
이미 내가 <React.Fragment>의 단축문법을 알고 사용하던 것이었다.
하지만 <React.Fragment>의 형태는 처음 접해서 당황했었다.
앞으로는 무엇이든 이것이 무엇인지, 왜 사용하는지에 대해서 항상 숙지하는 습관을 길러야겠다.

참고 사이트

https://ko.reactjs.org/docs/fragments.html