React Element rendering 엘리먼트 렌더링

Element 는 React 앱의 가장 작은 단위입니다.

 

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

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

브라우저 DOM 엘리먼트와 다르게, React 엘리먼트는 일반 객체(plain object)이고, 쉽게 생성할 수 있습니다.

그리고 React DOM은 React엘리먼트와 일치하도록 DOM을 업데이트합니다. 

 

*주의*
'컴포넌트'와 '엘리먼트'를 혼동하지 마세요. 엘리먼트(element)는 컴포넌트의 구성요소입니다. 

 

DOM에 엘리먼트 렌더링하기

HTML 파일 어딘가 <div>이 있다고 가정해 봅시다.

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

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에, 이것을 "루트(root)" DOM 노드라고 부릅니다.

 

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우

원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다.

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

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

 

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

React 엘리먼트는 불변객체입니다. 

따라서 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다.

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

 

지금까지 다룬 내용으로 미루어보면, UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고,

이를 ReactDOM.render()로 전달하는 것입니다.

 

예시로 똑딱거리는 시계를 만들어 봅시다.

function tick = () => {
  const element = (
  <div>
    <h1>Hello, World!</h1>
    <h2>It is {new Date().toLocaleTimeStrign()}.</h2>
  </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

*주의
위 예시는 1초마다 ReactDOM.render()를 반복 호출하고 있지만, 실제 대부분 React앱은 ReactDOM.render()를 한번만 호출합니다. 

 

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

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

 

위의 예시를 보면 Console에서 <h2> 엘리먼트만 매초 변경하고 있는 것을 확인할 수 있습니다.

즉, React DOM이 이전 UI와 비교해서 필요한 것만 업데이트를 한다고 이해할 수 있습니다.

 

아마도, 변경사항 외의 것들을 업데이트하지 않기때문에, 버그를 발견하기가 더욱 쉬워지지 않을까 싶습니다.