엘리먼트는 React 앱의 가장 작은 단위다.

엘리먼트는 화면에 표시할 내용을 기술한다.

const element = <h1>Hello, world</h1>;

브라우저 DOM 엘리먼트와는 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.

DOM에 엘리먼트 렌더링하기

HTML 파일 어딘가에 다음 div 태그가 있다고 가정한다.

<div id=”root”></div>

이 안에 들어가는 모든 엘리먼트들은 React DOM에서 관리하기 때문에 이 노드를 Root DOM 노드라고 부른다.

React로 구현된 앱은 일반적으로 하나의 루트 DOM 노드가 있다.

React 엘리먼트를 렌더링하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, React 엘리먼트를 root.render()에 전달해야 한다.

const root = ReactDOM.createRoot(
	document.getElementById('root') 
); // 1. DOM 엘리먼트를 ReactDOM.createRoot()에 전달하기
const element = <h1>Hello</h1>;
root.render(element); // 2. React 엘리먼트를 root.render()에 전달하기