React Element Rendering / React 엘리먼트 렌더링

※ Element

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

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

- 엘리먼트는 컴포넌트의 "구성 요소"입니다.

- React 엘리먼트는 불변객체입니다.

엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다.

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

React element는 브라우저 DOM element와 달리 일반 객체(plain object)이며, React DOM은 React element와 일치하도록 DOM을 업데이트합니다.

---

※ Rendering 하기

HTML 파일 어딘가 아래와 같은 DOM이 있습니다.

// 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리합니다.
// 때문에 이것을 ROOT DOM 노드라고 부릅니다.
<div id="root"></div>

* React로 구현된 애플리케이션은 일반적으로 하나의 ROOT DOM 노드가 존재합니다.

* 기존 app에 통합하려는 경우, 여러 독립된 ROOT DOM 노드가 존재할 수 있습니다.

 

엘리먼트를 ROOT DOM 노드에 렌더링하기 위해서 ReactDOM.render()로 엘리먼트와 ROOT DOM 노드를 전달을 합니다.

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

---

* 불변객체인 엘리먼트를 업데이트하기

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

setInterval을 이용하여 매 초마다 ReactDOM.render()를 호출합니다.

이는 매 초마다 새로운 엘리먼트를 생성하고, ReactDOM.render()를 호출하는 것으로 보입니다.

하지만, 실제로 (대부분의) React앱은 ReactDOM.render()를 한 번만 호출합니다.

 

* React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고, 다른 부분에 대해서만 DOM을 업데이트 합니다.

 

 

이전 글 : 2021.10.29 - [UI/React] - React 시작하기 / Node.js 설치 / React app 생성

React 시작하기 / Node.js 설치 / React app 생성

다음 글 : 2021.11.01 - [UI/React] - React Components와 Props

React Components와 Props