[React] JSX 문법(2) - fragment

JSX 태그로 html을 작성 시 하나로 감싸진 태그로 작성해야함

// 잘못된 예시
<p>안녕</p>
<p>하세요</p>

// 올바른 예시
<div>
	<p>안녕</p>
	<p>하세요</p>
</div>

 

* 이때 div를 만들고 싶지 않다면 fragment를 사용할 수 있다

=> 자동으로 Fragment 임포트가 됨

Fragment 사용 시, root 아래에 바로 p태그들이 나오게 됨

import { Fragment } from 'react';

<Fragment>
	<p>안녕</p>
	<p>하세요</p>
</Fragment>

 

=> Fragment는 주로 아래 코드처럼 축약형으로 사용함

(이때 임포트도 생략 가능함)

<>
	<p>안녕</p>
	<p>하세요</p>
</>