[React] - JSX(fragment)

JSX 표현식은 하나의 상위, 부모 요소를 가지고 있어야 함. 

형제요소만을 반환하면 오류 생김.

return문 <div></div>

<div>: 이 모든 값을 감싸는 객체 혹은 배열

But DOM에 중복되는 요소가 생김.

 

=>      fragment

root 컴포넌트가 필요한 경우, 형제 컴포넌트 감싸는 용도 사용 가능(화면상으로 보이는 실제 요소 렌더링 x)

import { useState, Fragment } from 'react';

function App () {
	return (
		<Fragment>
			.
			.
			.
		</Fragment>
	);
}

 

최근에는

import { useState } from 'react';

function App () {
	return (
		<>
			.
			.
			.
		</>
	);
}