요소 여러개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생하였다.
React Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 바뀐 사항과 변하지 않은 사항을 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.
그러한 이유로
function App() {
return (
<div>
<h1>Hello</h1>
<h2>React!</h2>
</div>
);
}
export default App;
div태그로 감싸주어야 한다. 그런데 꼭 div 태그를 사용해야될까? 그것은 아니다.
import {Fragment} from 'react'
리액트 v16이상부터 도입된 Fragment 기능을 사용하면 된다.
import {Fragment} from 'react'
function App() {
return (
<Fragment>
<h1>Hello</h1>
<h2>React!</h2>
</Fragment>
);
Fragment는 다음과 같은 형태로도 표현할 수 있다.
import {Fragment} from 'react'
function App() {
return (
<>
<h1>Hello</h1>
<h2>React!</h2>
</>
);
훨씬 간단하고 브라우저에서도 잘 출력된다!