리액트 고급 가이드 - Fragments

개요

React의 일반적인 패턴은 컴포넌트가 여러 element를 반환하는 것 이다. fragment을 사용하면 DOM에 노드를 추가하지 않고 하위 목록을 그룹화 할 수 있다.

render() {

  return (

    <React.Fragment>

      <ChildA />

      <ChildB />

      <ChildC />

    </React.Fragment>

  );

}

동기

보통 패턴은 자식의 목록을 반환하는 컴포넌트를 위해 존재한다. 

class Table extends React.Component {

  render() {

    return (

      <table>

        <tr>

          <Columns />

        </tr>

      </table>

    );

  }

}

<Columns />는 렌더링 된 HTML이 유효하도록 여러 <td> element를 반환해야 한다. 부모 div가 <Columns />의 render() 내에서 사용 된 경우 결과의 HTML은 유효하지 않다.

class Columns extends React.Component {

  render() {

    return (

      <div>

        <td>Hello</td>

        <td>World</td>

      </div>

    );

  }

}

<Table /> output의 결과: 

<table>

  <tr>

    <div>

      <td>Hello</td>

      <td>World</td>

    </div>

  </tr>

</table>

그래서, 우리는 Fragments를 소개한다.

사용법

class Columns extends React.Component {

  render() {

    return (

      <React.Fragment>

        <td>Hello</td>

        <td>World</td>

      </React.Fragment>

    );

  }

}

올바르 <Table/> output의 결과:

<table>

  <tr>

    <td>Hello</td>

    <td>World</td>

  </tr>

</table>

Keyed Fragments

명시적으로 <React.Fragment> 구문으로 선언 된 fragment에는 key가있을 수 있습니다. 이를 위한 케이스는 콜렉션을 fragment array에 mapping하는 것, (예 : 설명 목록을 생성하는 경우).

function Glossary(props) {

  return (

    <dl>

      {props.items.map(item => (

        // Without the `key`, React will fire a key warning

        <React.Fragment key={item.id}>

          <dt>{item.term}</dt>

          <dd>{item.description}</dd>

        </React.Fragment>

      ))}

    </dl>

  );

}

key는 Fragment에 전달할 수있는 유일한 attribute. 앞으로 이벤트 핸들러와 같은 추가 attribute에 대한 지원을 추가 할 수 있다.

참조: 리액트 16.3 공식 문서 영문판