Fragment 사용법

Fragment란?

프래그먼트는 컴포넌트가 여러개의 엘리먼트를 하나로묶어, 하나의 엘리먼트처럼 리턴해주록 하는 기능이다.

컴포넌트는 하나의 엘리먼트를 리턴해야 한다. 물론 그 엘리먼트 안에 여러 자식 엘리먼트들이 있을 수 있다.

그러나 특정한 상황에서 여러개의 엘리먼트를 리턴해주어야 하는 경우가 있다. 아래 예시를 보자

 

 

 

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

 

위 예시에서 <tr> 안에 Columns는 여러개의 <td>를 리턴해야 한다

허나 컴포넌트는 하나의 엘리먼트만 리턴해야 함으로 이를 <div>로 아래처럼 감쌌다고 하자

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

 

 

 

그럼 최종적인 HTML 코드는 아래처럼 될 것이다.

 

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

 

 

<tr>안에 <div>가 있고 그 안에 <td>가 있다. 이건 정상적인 코드가 아니다.

 

 

 

 

해결방법

이를 해결하기 위해 리액트에서는 프래그먼트를 제공한다

아래처럼 <div>대신에 <React.Fragment>를 사용하자

 

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

그럼 최종적인 html 코드는 아래처럼 된다

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

<div>가 없어졌다!

 

 

 

즉 프래그먼트란 여러개의 엘리먼트를 하나로 묶어서, 하나의 엘리먼트처럼 사용하게 해 주는 기능이다!

 

 

프래그먼트를 짦게 선언하는 법

프래그먼트는 아래처럼 <> 로 사용가능하다

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

 

 

 

 

Key가 있는 Fragment

만약 Fragments에 key값이 있다면 <React.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>
  );
}