[React] - 엘리먼트 렌더링

아래 내용은 React Document 를 바탕으로 만들어졌다.

엘리먼트 렌더링

엘리먼트는 React 앱의 가장 작은 단위 이다.

엘리먼트는 컴포넌트의 구성 요소 이다.

엘리먼트는 화면에 표시할 내용을 기술한다.

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

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

• 추가 예정

DOM에 엘리먼트 렌더링 하기

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

root 안에 들어가는 모든 엘리먼트를 React DOM 에서 관리한다. 이걸 루트(root) DOM 노드 라고 부른다.

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

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

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

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

React 엘리먼트는 불변객체 이다. 앨리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.

엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다.

• 엘리먼트는 불변 객체 이지만, 실제 객체가 변경되지 않는 선에서 업데이트 된다. 한마디로 엘리먼트 내부의 객체(JavaScript) 가 변경되면 변경된 Element로 렌더링 된다.

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

실제로 위의 코드를 실행 시켰을 때, new Date().toLocaleTimeString()객체가 있는 부분은 문자열로 렌더링 된다. 이는 이전 JSX 에 대한 document에서 볼 수 있듯이, React DOM은 렌더링 되기 이전에 모든 값을 문자열로 바꾼 후 렌더링 되기 때문이다.

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

• 요약 : ReactDOM 이 render 될 때 이전과 다른 경우에만 DOM을 업데이트

위 코드를 실행 시켜보면 알 수 있듯, 매 초 ReactDOM.render()를 호출해 전체 UI를 다시 그리도록 했지만,

위와 같이 개발자도구에서 보면 변경된 텍스트 노드만 업데이트 하는 걸 볼 수 있다.