3. Element rendering

DOM에 엘리먼트 렌더링하기

HTML 파일 어딘가에 <div>가 있다고 가정

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

 

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부름

 

- React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있음

- React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있음

 

// React 엘리먼트를 렌더링 하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, 
// React 엘리먼트를 root.render()에 전달해야 함.
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);