[React] React.js Fragments

 

React에서 컴포넌트가 여러 Elemnet를 반환하도록 사용하는 것이 일반적인데, Fragment는 DOM에 의미 없는 div를 사용하지 않고 여러 하위 노드들을 그룹화해서 사용 가능합니다.

 

아래 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>

 

결과를 살펴보면 <tr>안에 <div>가 포함되어 있는 것을 볼 수 있는데 이것을 제거하기 위하여 아래와 같이 작성해줍니다.

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

 

그러면 <div>는 제거되고 출력결과가 나타납니다!

 

위와 같이 <React.Fragment>를 작성하는 것 대신에 <>로 간결화 시켜줄 수 있습니다!

 

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

 

마지막으로 Table에 Key를 매핑시켜주고 싶으면 <React.Fragment>를 작성해야 합니다.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

 

 

Reference

 

https://narup.tistory.com/188

[React] React.js 강좌 3. Fragments