[React] Element Rendering

Element?

먼저 Element란 React에서의 가장 작은 단위로 화면에 표시할 내용을 기술한다.

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

브라우저 DOM Element와 달리 React Element는 일반 객체이며, 쉽게 생성할 수 있다. 더 널리 알려진 개념인 Component와 Element가 혼동될 수 있지만, Element는 Component의 구성요소이다.

 

DOM에 Element Rendering

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

HTML 파일 어딘가에 <div>가 있다고 가정해보자. 이 안에 들어가는 모든 Element를 React DOM에서 관리하기 때문에 이것을 Root DOM 노드라고 부른다. React로 구현된 Application은 일반적으로 하나의 Root DOM 노드가 있다.

 

React Element를 Rendering하기 위해서는 아래의 코드와 같이 우선 DOM Element를 ReactDOM.createRoot()에 전달한 다음, React Element를 root.render()에 전달해야 한다.

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

const element = <h1>Hello, World!</h1>;

root.render(element);

Rendering 된 Element 업데이트

React Element는 불변객체이다. Element를 생성한 이후에는 해당 Element의 자식이나 속성을 변경 할 수 없다. Element는 특정 시점의 UI를 보여준다. 지금까지의 내용으로 보면, UI를 업데이트하는 유일한 방법은 새로운 Element를 생성하고 이를 root.render()로 전달하는 것이다.

 

예시로 아래의 코드를 보자. 시계를 구현하였고, setInterval() 콜백을 이용해 초마다 root.render()를 호출한다. 

※ 실제 대부분의 React 앱은 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);

변경된 부분만 업데이트

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

매초 전체 UI를 다시 그리도록 Element를 만들었지만, React DOM은 내용이 변경된 텍스트 노드만 업데이트 했다. 아래의 링크를 통해 접속하여 개발자 도구를 보면 확인할 수 있다!

https://codepen.io/gaearon/pen/gwoJeZ?editors=1010

 

 

 

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

https://goddaehee.tistory.com/297