리액트 공식문서 읽기 - 주요개념(엘리먼트 렌더링)

엘리먼트 렌더링

엘리먼트 (!== 컴포넌트)

• React 앱의 가장 작은 단위, 리액트 앱을 구성하는 요소
• 화면에 표시할 내용을 기술한다.

const element = <h1 className="greeting">Hello, world!</h1>;

• 브라우저 DOM 엘리먼트(브라우저 환경에서 웹 페이지의 구성요소를 나타내는 특수 객체)와 달리 React 엘리먼트는 일반 객체(plain Object)이며 쉽게 생성할 수 있다.
• React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.

 

DOM에 엘리먼트 렌더링하기

• 루트(root) DOM 노드: root 안에 들어가는 모든 엘리먼트는 React DOM에서 관리한다.

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

 

• 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);

 

렌더링 된 엘리먼트 업데이트하기

React 엘리먼트는 불변 객체이며, 따라서 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.

UI를 업데이트하는 유일한 벙법은 새로운 엘리먼트를 생성하고 이를 `root.render()`로 전달하는 것이다.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

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

setInterval(tick, 1000);

👉 `setInterval()` 콜백을 이용해 매 초마다 `root.render()`를 호출하는 시계 코드

 

실제 대부분의 React 앱은 `root.render()`를 한 번만 호출한다.
위와 같은 코드가 유상태 컴포넌트(State 이용한 컴포넌트)에 어떻게 캡슐화되는지는 다음 장에서...

 

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

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

위 시계 코드를 개발자 도구를 이용해 살펴보면, 전체 UI가 매초 다시 그려지는 대신 내용이 변경되는 텍스트 노드만 업데이트되는 것을 알 수 있다. 

 

 

 

---

공부에 참고하면 좋을 사이트

[React] - [처음 만난 리액트] - 12. Elements의 정의와 생김새(리액트 엘리먼트와 DOM 엘리먼트 차이점)

 

DOM 트리