React 에서 하나의 태그로 감싸져 있는이유

import React from 'react';

function App(){
	return(
          <div>
            <h1>리액트<h1>
            <h2>연습<h2>
          <div/>
     );
 }
 export default App;

 

위의 코드처럼 h1태그와 h2태그가 div태그 하나로 감싸져있다.

이렇게 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸는 이유는 

컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.