Element Rendering

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

엘리먼트 렌더링 – React

 

Element는 React App의 가장 작은 단위이다.

 

React에 모든 엘리먼트는

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

root 엘리먼트 안에 들어가게 되는데, 이 모든 엘리먼트는 React DOM에서 관리하고,`

root 엘리먼트는 root 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 엘리먼트는 불변성을 가지고 있다. 생성된 이후에는 엘리먼트의 자식이나 속성을 변경하는 것이 불가하다.

 

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전 엘리먼트와 비교하고 달라진 부분에 대해서만 DOM을 업데이트한다.

Ex) 시계 코드로 확인해보자.

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

 

'root' 노드를 만들어주고, 1초 단위로 시간을 나타내주는 시계 엘리먼트를 만들어 root에 생성해준다.

 

setInterval() 로 인해 매초 마다 root.render(element)가 실행이 되는데 개발자 도구를 확인해보면

달라지는 시간에 대해서만 업데이트를 하고 있는 것을 확인 할 수 있다.