Element는 React앱의 가장 작은 단위입니다.

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

• 브라우저 DOM Element와 달리 React Element는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다.
• React DOM은 React Element와 일치하도록 DOM을 업데이트합니다.

DOM Element 렌더링하기

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

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

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

• React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다.
• React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다.

렌더링 된 Element 업데이트하기

• React Element는 불변객체입니다. Element를 생성한 이후에는 해당 Element의 자식이나 속성을 변경할 수 없습니다. Element는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줍니다.
• React DOM은 해당 Element와 그 자식 Element를 이전의 Element와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트합니다.