[React] Fragment, <></>

리액트 컴포넌트에서 JSX를 사용할 때, 보통 하나의 최상위 요소로 모든 것을 감싸야 한다.

function App() {
	return (
    	<div>
        	<Header />
            <main>
            	<p>안녕하세요</p>
            </main>
        </div>
    )
}

---

의미없는 div를 사용하기 싫을 때, Fragment 로 묶어줄 수 있다.

import { useState, Fragment } from 'react';

function App() {
	return (
    	<Fragment>
        	<Header />
            <main>
            	<p>안녕하세요</p>
            </main>
        </Fragment>
    )
}

html내에서 보이지 않는다

---

빈 태그로 묶어줄수도 있다

function App() {
	return (
    	<>
        	<Header />
            <main>
            	<p>안녕하세요</p>
            </main>
        </>
    )
}

역시 html내에서 보이지 않는다