Element

React 앱의 가장 작은 단위로, 화면에 표시할 내용을 기술한다.

Element Rendering

DOM에 element 렌더링하기

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

React 프로젝트를 생성하면 html 파일 중 다음의 코드가 존재한다.

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

위의 코드는 root DOM 노드로, 해당 노드 안에 들어가 있는 모든 element들은 React DOM에서 관리한다.
React로 구현된 애플리케이션은 일반적으로 하나의 root DOM 노드가 존재하는데, 경우에 따라 여러 독립된 root DOM 노드가 존재할 수 있다.

React element를 렌더링하기 위해서는 다음의 코드와 같이,
DOM element를 ReactDOM.createRoot()에 전달한 다음, React element를 root.render()에 전달해야 한다.

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

렌더링된 element 업데이트하기

React element는 특정 시점의 UI를 보여주는 불변 객체이기 때문에,
element를 생성한 이후에는 해당 element의 children이아 attribute를 변경할 수 없다.

따라서 UI를 업데이트하는 유일한 방법은 새로운 element를 생성하고 이를 root.render()로 전달하는 것이다.

변경된 부분만 업데이트하기

React DOM은 해당 element와 그 자식 element를 이전의 element와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다.

Ref

https://ko.reactjs.org/docs/rendering-elements.html