Eojin Han

React 16부터 JSX Fragments 개념을 도입했다.

Fragment

: 불필요한 구조를 페이지에 추가하지 않고도 마크업들을 그룹화하는 방법

요소들을 그룹화 하기 위해 <div> tag로 묶곤하는데, 사실 그룹화를 위해서 쓸 뿐 렌더링에서 별도의 기능을 수행하진 않는다.

따라서 DOM 구조에 불필요하게 추가되지 않으면서도, 단지 하위 요소들을 렌더링하면 된다는 것을 알려주는 특수한 타입이 바로 Fragment다.

<div> tag으로 요소들을 그룹화 한 경우


//<div> tag으로 요소를 그룹화 한 경우

import React, { Component } from 'react';

class WithoutFragments extends Component{
	render(){
		return(
			<div>
				<h1>Without Fragments</h1>
				<p>
					Adds an extra <code>div</code> element.
				</p>
			</div>
		);
	}
}

export default WithoutFragments;

DOM으로 구조를 살펴보면 아래와 같다.


<div>
	<h1>Without Fragments</h1>
	<p>
		"Adds an extra"
		<code>div</code>
		"element."
	</p>
</div>

Fragment로 요소들을 그룹화 한 경우


//Fragment로 요소를 그룹화 한 경우

import React, { Component } from 'react';

class WithoutFragments extends Component{
	render(){
		return(
			<Fragment>
				<h1>Without Fragments</h1>
				<p> Doens't have any unused DOM elements.</p>
			</Fragment>
		);
	}
}

export default WithoutFragments;

DOM 구조를 살펴보면 아래와 같다.


<h1>Without Fragments</h1>
<p> Doens't have any unused DOM elements.</p>

추가 팁 : <Fragment></Fragment> 를 더 줄여서 <> </>로 써도 된다.