[React] Fragment란? - 단축문법, key가 있는 Fragments

Fragment란?

React에서 컴포넌트가 여러 엘리먼트를 반환하는 패턴을 자주 볼 수 있다. Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다. 다음은 Fragment을 사용하는 방법이다. Fragment 안에 render하고 싶은 child를 넣어주면 된다.

 

// Fragment의 기본 구조

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

 

example

더 정확한 이해를 위해 예시를 통해 알아보자.

예를 들어, 아래와 같이 table에 ‘Hello World’를 출력하고 싶다고 가정한다.

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

 

우리가 위와 같이 출력하고자 하는 경우 아래와 같이 Table과 Columns를 구분하여 생성한 후 Table안에 Columns를 생성하고자 할 것이다.

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 />의 결과는 아래와 같이 나타난다.

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

 

위와 같이 불필요한 <div>가 중간에 추가 된다. Fragment는 이러한 문제를 해결해준다. Fragment 기본 구조를 참고하여 대입해 보면 아래와 같이 변경할 수 있다.

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

 

위 코드는 아래와 같은 결과를 반환하며, 이제 불필요한 <div> 없이 원하는 출력 결과를 얻을 수 있다.

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

 

단축문법

Fragment는 <></>로 간결하게 대체하여 사용할 수 있는 문법을 제공한다.

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

 

key가 있는 Fragments

Fragments에 keyr가 있다면 <React.Fragment>를 명시적으로 선언해서 사용해야 한다.(단축문법 사용 불가) 현재 key는 Fragment에 전달할 수 있는 유일한 어트리뷰트이며, 추후 이벤트 핸들러와 같은 추가적인 어트리뷰트를 지원할 수도 있다고 한다.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // React는 `key`가 없으면 key warning을 발생합니다.
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

 

참고

React 공식문서 : https://ko.reactjs.org/docs/fragments.html#short-syntax