[React.js] 감싸인 요소

요소를 부모 태그로 감싸라!

컴포넌트는 하나의 DOM트리 구조로 이루어져야 한다.

React에서는 Virtual DOM이 효율적으로 컴포넌트 변화를 감지해내기 위해 하나의 DOM트리 구조로 이루어져야 하는데, 이를 위해 <div>와 같은 부모 태그로 요소를 감싸주어야 한다.

<Fragment></Fragment>

꼭 부모 태그를 <div>태그를 사용하기 싫을 때도 있을 것이다. 이때는 <Fragement>를 사용하자.

function App() {
return(
	<Fragment>
  		<h1> 안녕하세요 </h1>
  		<h2> 안녕히가세요 </h2>
  	</Fragment>
)
export default App;

또는, <>, </>로 대신할 수 있다.

function App() {
return(
	<>
  		<h1> 안녕하세요 </h1>
  		<h2> 안녕히가세요 </h2>
  	</>
)
export default App;

훨씬 간단한 것을 알 수 있다.