import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <Fragment>
      <h1>{name} 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </Fragment>
  );
}
 
export default App;

react componenet 에서 여러 개를 왜 하나의 요소로 꼭 감싸주어야 한다. 위에서는

<Fragment>

태그를 사용하여 요소들을 감싸주었다. <> </> 의 형태만으로도 사용가능하다.

감싸진 요소를 쓰는 이유

virtual DOM 에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.