[React] Element란?

Element

엘리먼트는 컴포넌트의 구성요소이며 React앱의 가장 작은 단위다. 엘리먼트는 화면에 표시할 내용을 기술한다.

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

root 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하며 이것을 root DOM 노드라고 부른다. 일반적으로 React로 구현된 앱은 하나의 Root DOM 노드가 있다.

React 엘리먼트를 root DOM 노드에 렌더링 하려면 ReactDOM.render(element, document.getElementById('root'))에 전달하면된다.

렌더링을 마친 엘리먼트를 수정하기

React 엘리먼트는 불변객체다. 생성한 이후에는 자식이나 속성을 변경할 수 없고 특정 시점의 UI를 보여준다.
UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()에 전달하는 것이다.

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

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

매초 전체 UI를 다시그리도록 엘리먼트를 만들었지만 React DOM은 내용이 변경된 텍스트 노드만 업데이트한다.

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