React.Fragment 사용이유

리액트에서는 하나의 컴포넌트에서 여러개의 앨리먼트가 반환되는데 이때 return문 안에는 앨리먼트들을 묶어주는 최상위 태그가 있어야한다.

다음 코드에서 Table 컴포넌트가 출력되면

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

const Column = () => {
	return (
  		<div>
    		<td>Hello</td>
    		<td>World</td>
  		</div>
	);
}

이러한 형태를 가지게 된다.

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

이때 불필요한 div 태그 사용을 막기 위해 React.Fragment 또는 단축문법을 사용한다.

// React.Fragment
return (
  <React.Fragment>
    <td>Hello</td>
    <td>World</td>
  </React.Fragment>
);

// 단축문법
return (
  <>
    <td>Hello</td>
    <td>World</td>
  </>
);

React.Fragment 와 단축문법의 차이점은 key attribute를 할당할 수 있는가 없는가 인데 map을 이용해서 리스트를 출력할 경우 아래와 같은 형태로 키값을 명시적으로 표시할 수 있다. 키값이 필요하지 않을 경우 단축문법을 사용해서 간단하게 맵핑작업을 해주면 된다.

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