Portfolio

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

지난 챕터에서 컴포넌트가 여러 엘리먼트를 return 해야 할 경우 jsx에서는 최상위 부모요소는 한 개의 태그만 있어야 하기 때문에 div 태그로 다른 태그들을 감싸주었습니다. 하지만 이렇게 코드를 작성하면 여러 개의 엘리먼트들을 감싸주기 위해서 의미 없는 div 태그를 사용하게 됩니다.


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

의미없는 <div> 태그가 사용된 예시

이렇게 의미 없는 태그들을 사용하면 시맨틱한 마크업 작성을 방해하게 됩니다.

목록(<ol><ul><dl>) 이나 <Table> 를 사용할 때 이 문제가 좀 더 두드러지게 되죠.


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>
  );
}

React 공식문서

3-1. Fragments

Fragements 를 사용하면 <div> 와 같은 별도의 노드를 추가하지 않고 여러 개의 자식을 감싸줄 수 있습니다.


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

React 공식문서

우선 코드 상단에 import를 통해 모듈을 추가해 주세요.


import React, { Fragment } from 'react';

모듈을 추가했다면 아래와 같이 Fragment를 사용하여 작성해 봅시다!


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

Fragment 라는 키워드 대신 <> </> 를 사용할 수도 있습니다.


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

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


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

React 공식 문서

Fragement를 사용하지 않았을 때


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

React 공식 문서

<Table /> 의 출력 결과


<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>
    );
  }
}

React 공식 문서

<Table /> 의 출력 결과


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

3. Fragment

3-1. Fragments

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