React - Element

1. React Element

• 실제로 화면에 표시할 내용을 기술
• type(문자열, 컴포넌트 함수/ 클래스) 필드와 props(객체) 필드를 가지는 React의 객체
• 쉽게 말해 컴포넌트를 JSON으로 표현한 것
• React 라이브러리에 있는 React.createElement()를 이용하여 만들 수 있으며 type으로 HTML 태그 이름을 가지고 그 이외의 특징을 props로 관리하는 객체 형태로 정의

// createElement를 이용해서 React Element 만들기
React.createElement(
    'div',
    { className: 'name'},
    'React'
)

// createElement를 이용해서 만들어진 React Element 객체
{
    type: 'div',
    props: {
        className: 'name',
        children: 'React'
    }
}

// JSX를 이용해서 나타내기
<div className="name"> React</div>

 

2. DOM에 엘리먼트 렌더링하기

• DOM이란 HTML, XML 문서의 프로그래밍 interface라고 한다. 쉽게 이해하면, 웹 페이지를 이루는 요소들(태그 등)을 자바스크립트가 이용을 할 수 있게 브라우저 내에서 트리 구조로 만든 객체 모델이라고 생각하면 될 것 같다. DOM은 HTML, XML 등의 문서와 JavaScript를 이어준다.
• VirtualDOM 
  • 실제 DOM에 직접 접근하는 대신에, 이를 자바스크립트 객체로 구성하여 DOM을 추상화하여 사용하는 방식이다.
  • React를 사용할 때에는 React가 모두 처리를 해주기 때문에, DOM API를 직접 구현하지 않아도 된다.
  • 기존 페이지의 데이터 버전을 v1, 바뀐 페이지의 데이터 버전을 v2라고 하자.
    1. 데이터가 업데이트 되면, v2의 UI 전체를 Virtual DOM을 리렌더링한다.
    2. 그렇다면 기존에 Virtual DOM에 있던 v1과 바뀐 현재의 v2를 비교한다. (Virtual DOM끼리 비교를 하는 것이다.)
    3. 비교를 한 뒤, 바뀐 일부분만 실제 DOM에 적용이 된다.
  • 실제 DOM에서 데이터가 업데이트 될 때마다 계속해서 작은 규모로 리플로우를 여러 번 하는 것보다 VirtualDOM을 이용하여 실제 DOM에서는 크게 한 번 리플로우 되는 것이 성능을 비교 했을 때, 성능 향상을 가져오게 된다.
• Root DOM Node
  • React로 구현된 어플리케이션은 일반적으로 하나의 루트 DOM 노드 안에 들어가는 모든 엘리먼트를 ReactDOM 에서 관리한다.
  • 만일 여러 React 앱을 통합하려 한다면 그만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다.
• ReactDOM.render()
  • React Element를 루트 DOM 노드에 렌더링하려면 ReactDOM.render()로 전달하면 된다.

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

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

 

3. 렌더링 된 엘리먼트 업데이트

• React의 Element는 불변객체 입니다. Element를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다. 따라서 새로운 UI 를 업데이트 하는 방법은 새로운 Element를 만들고 새로 만들어진 Element를 render로 전달하는 방법

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

• React DOM은 해당 엘리먼트와 그 자식엘리먼트를 이전에 있던 엘리먼트와 비교하여 차이점이 있는부분만 새로 업데이트 합니다.

 

 

 

[참고]

[React] DOM이란? (velog.io)

https://meetup.toast.com/posts/110

React 렌더링과 성능 알아보기 : NHN Cloud Meetup