Fragment

Fragment

Fragments – React

React에서 컴포넌트가 여러 엘리먼트를 반환하기 위해서는 하나의 노드로 묶어줘야 합니다. 이때 별도의 노드를 추가하지 않고 하는 방법이 Fragment입니다.

<React.Fragement>
	<ChildA />
	<ChildB />
	<ChildC />
</React.Fragment>

사용 이유

<table>
	<tr>
		<Columns />
	</tr>
</table>

const Columns = () => {
	return (
		<div>
			<td>1</td>
			<td>3</td>
			<td>3</td>
		</div>	
	)
}

위와 같은 코드가 있다고 한다면 Columns 컴포넌트는 정상적으로 동작하지 않습니다. td가 바로 자식으로 나오지 않았기 때문입니다. 이러한 경우 Fragments를 사용해서 문제를 해결할 수 있습니다.

const Columns = () => {
	return (
		<React.Fragement>
			<td>1</td>
			<td>3</td>
			<td>3</td>
		</React.Fragement>	
	)
}

단축 문법

<></>를 사용한다면 더 짧은 문법을 사용할 수 있습니다.

key가 있는 Fragements

단 Fragments에 key가 있다면 문법으로 명시적으로 선언해야 합니다.