[React 공식문서] element Rendering

 

React 공식문서를 기반으로 작성된 포스팅입니다

 

 

element는 React App의 가장 작은 단위입니다.

 

element는 화면에 표시할 내용을 기술합니다.

 

 

JSXf를 이용해서 element 만들기

const element = <h1 className="greeting">This is element</h1>;

 

createElement를 이용해서 element 만들기

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'This is element'
);

 

 

브라우저 DOM element와 달리

React element는 일반 객체이며 쉽게 생성할 수 있습니다.

 

DOM은 element와 일치하도록 DOM을 업데이트합니다.

 

component와 element를 혼동할 수 있습니다.
element는 component의 구성요소입니다.
component에 대한 것은 다음 포스팅에서 더 자세하게 다루겠습니다.

 

DOM에 element rendering하기

 

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

 

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

 

이 안에 들어가는 모든 element를 React DOM에서 관리하기 때문에

이것을 "Root DOM" 노드라고 부릅니다.

 

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. 

React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다.

 

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

 

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

-> Hello, world

 

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

 

React element는 *불변객체(immutable object)입니다.

*불변 객체는 객체를 복제할 때 객체 전체가 아니라 단순히 참조만 복사하고 끝난다

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

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

 

지금까지 소개한 내용을 바탕으로 하면 UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.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);

 

-> https://codepen.io/hihui/pen/MWEVqep

 

React_Timer

 

위 함수는 setInerval() 콜백을 이용해 초마다 ReactDOM.render()를 호출합니다.

 

 

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

 

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데,

필요한 경우에만 DOM을 업데이트합니다.

 

위의 예제를 개발자 도구를 이용해서 보면

이를 확인할 수 있습니다.

 

 

매초 전체 UI를 다시 그리도록 엘리먼트를 만들었지만

React DOM은 내용이 변경된 텍스트 노드만 업데이트했습니다.

 

이런 접근법은 시간의 변화에 따라 UI가 어떻게 변화할 지 고민하는 것보다 더 많은 수의 버그를 없앨 수 있습니다.