[React] Element 랜더링

인프런의 [처음 만난 리액트] 강의를 학습하면서 공부 + 정리한 내용입니다

 

Element란?

Element란 리액트 앱을 구성하는 요소로 리액트의 앱을 구성하는 가장 작은 단위입니다!

화면에서 보이는 것들을 기록하는 것이죠.

 

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

 

 

 

이 Element라는 단어는 브라우저의 DOM에서도 많이 들어봤을텐데요.

리액트 Element와  DOM Element는 어떤 차이가 있을까요?

Virtual DOM과 Browser DOM의 차이?
DOM Element는 브라우저의 실제 DOM에 존재하는 Element입니다.
그렇기 때문에 리액트 Element에 비해 많은 정보를 담고 있어서 크고 무겁습니다

반면, 리액트 Element는 일반 객체(plan object)로 쉽게 생성할 수 있습니다.
또한 리액트 DOM은 React Element와 일치하도록 리액트 DOM을 업데이트 합니다

 

 

특징

리액트 Element의 특징으로 불변성(immutable)이 있습니다.

 

불변성은 단어 그대로 변하지 않는 성질이라는 뜻입니다. 즉, 한 번 생성된 Element는 변하지 않는다는 것이죠.

이 말의 의미는 Element 생성 후에는 해당 Element의 자식이나 속성을 바꿀 수 없다는 의미입니다.

 

그렇다면 Element는 눈에 보이는 걸 기술하는데, 변할 수 없다는 건 화면이 바뀌지 않는다는 건가?🙄
그러면 화면에 변경된 Element를 보여주기 위해서 어떻게 해야할까?🙄

라는 의문점이 생길 수도 있습니다.

 

화면에 변경된 Element를 보여주기 위해서는 기존의 Element를 변경하는 게 아니라

새로운 Element를 생성해서 기존 Element와 바꿔치기 하는 방법을 사용합니다 

 

Element 랜더링 하기

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

이 div 태그를 Root DOM Node라고 합니다. 이 div 태그 안에 모든 리액트 Element들이 랜더링 되며 이 안에 있는 모든 Element들이 React DOM에 의해 관리됩니다.

 

Root DOM 노드는 일반적으로 1개가 존재하며 리액트 가상 DOM의 최상단 Element 입니다

 

 

Element를 화면에 랜더링 하기 위해서는 

1. Root 노드를 생성

2. Element 생성

3. root.render() 를 통해 리액트 DOM에 랜더링 합니다

 

const root = ReactDOM.createRoot( // 1. 루트 노드 생성
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>; // 2. Element 생성
root.render(element); // render()를 통해 리액트 DOM에 랜더링

 

 

랜더링 된 Element 업데이트 하기

앞서 살펴본 것처럼 Element는 불변하기 때문에 한 번 생성되면 바꿀 수 없습니다. UI를 변경하기 위해서는 새로운 Element를 다시 생성해 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 함수를 통해 매초마다 Element를 새롭게 생성해 다시 render() 함수를 통해 랜더링 하고 있습니다

 

 

위 코드를 실행하면 개발자 도구에서 아래 화면과 같이 확인할 수 있습니다.

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

 

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교해 달라진 부분만 다시 랜더링을 합니다.

코드 상으로는 매초 새로운 Element를 생성해 UI를 업데이트 하지만 React DOM은 실제로 달라진 부분인 텍스트 노드만 업데이트 합니다. 

 

이처럼 React는 내부적으로 가상 DOM을 사용하기 때문에 빠른 랜더링이 가능하다는 장점이 있습니다

 

 

---

참고자료

엘리먼트 랜더링

엘리먼트 렌더링 – React