3. Fragment

function App() {
  return (
		<div>
			<h1>안녕, 라이캣 1호!</h1>
			<h1>안녕, 라이캣 2호!</h1>
		</div>
  );
}

import React, { Fragment } from 'react';

function ListItem({ item }) {
  return (
    <div>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </div>
  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  );
}

3-1. Fragments

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

import React, { Fragment } from 'react';

function App() {
  return (
		<React.Fragment>
			<h1>안녕, 라이캣 1호!</h1>
			<h1>안녕, 라이캣 2호!</h1>
		</React.Fragment>
  );
}

function App() {
  return (
		<>
			<h1>안녕, 라이캣 1호!</h1>
			<h1>안녕, 라이캣 2호!</h1>
		</>
  );
}

Fragement를 사용할 때와 사용하지 않을 때를 비교해 봅시다.

function Table(){
	return(
		<table>
				<tr>
					<Columns />
				</tr>
		</table>
	)
}

• Fragement를 사용하지 않았을 때

function Columns(){
	return(
		<div>
			<td>Hello</td>
			<td>World</td>
		</div>
	)
}

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

• Fragment 사용했을 때

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

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