엘리먼트 렌더링이란??

엘리먼트는 React앱의 가장 작은 단위이다. 화면에 표시할 내용을 기술함

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

브라우저 DOM 엘리먼트와 달리 React엘리먼트는 일반 객체(plain object)이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다.

컴포넌트와 엘리먼트를 혼동하지 말 것! 엘리먼트는 컴포넌트의 구성요소이다

DOM에 엘리먼트 렌더링하기

HTML 파일 어딘가에 <div>가 있다고 가정해 본다면

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

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 '루트'DOM 노드라고 부른다.

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM노드가 존재, React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다.

 

React 엘리먼트를 루트 DOM노드에 렌더링 하려면 둘 다 ReactDOM.render()로 전달하면 된다.

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

렌더링 된 엘리먼트 업데이트하기

React 엘리먼트는 불변객체이다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 엘리먼트는 특정 시점의 UI를 보여준다

• 지금까지 내용에서 UI를 업데이트 하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()로 전달하는 것
  ex) : 시계 구현

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

• setInterval()콜백을 이용해 1초마다 ReactDOM.render()를 호출함
  실제로는 App.vue파일(루트에 위치)의 components 처럼 ReactDOM.render()를 한번만 호출하는 것이 일반적이다.

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

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