[본캠프]<div id="root"></div> 대체 뭐야?

<div id="root"></div>

 리액트 프로젝트를 생성하여 파일을 살펴보면 html이 있는데 리액트 배우고나서부터는 건들지도 않고 있다.

 

 

html안을 보다가 문득 든 생각이, root라는 id이름을 가진 div태그는 어떤 역할을 하는 요소일까??

 

1. 렌더링 대상

ReactDOM.render()함수가 이 요소를 찾아서 그 안에 컴포넌트를 렌더링한다.

예를들면 ReactDOM.render(<App/>, document.getElementById('root'))코드가 실행되면, <App/>컴포넌트의 내용이 <div id='root'></div>안에 표시된다.

 

2. 애플리케이션 구조

모든 react컴포넌트는 이 루트 요소 아래에 계층적으로 구조화된다.

여러개의 컴포넌트가 <div id='root'></div>아래에서 서로 포함되거나 연결될 수 있다.

 

 

즉, ui화면에 표시하는 데 필수적인 요소이다. 삭제하면 절대 안되고 작동되지 않게 된다!!!!!!