[ReactJS] Rendering Elements

React Rendering Elements: 공식 홈페이지 원문

Rendering Elements

Elements는 React로 만드는 앱들 중에 가장 작은 빌딩 블록을 의미한다.

하나의 Element는 화면에 보여지는 하나의 객체를 표현한다.

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

브라우저의 DOM element 들과 다르게, React element는 일반 객체이고 객체 생성에 드는 비용이 비교적 적다. React DOM은 React element에 대응대는 DOM 을 업데이트 한다.

Note

component와 element는 다른 개념이다. component에 대한 설명은 다음 문서에서 제공한다. 여러개의 element로 component를 구성할 수 있다.

 

Rendering an Element into the DOM

 
xxxxxxxxxx
<div id="root"></div> <!-- id가 root인 div 태그 -->

위와 같이 HTML 파일에 존재하는 id가 root인 <div> 태그를 'root' DOM이라고 호칭하며, 하위 요소들은 React DOM에 의해 관리된다.

React로 구성된 애플리케이션은 보통 하나의 root DOM 노드를 가지고 있으며, 기존에 존재하던 앱에 React를 적용할 경우에는 원하는 만큼의 root DOM 노드를 설정하고 관리할 수 있다.

특정한 React element를 root DOM 노드에 보여주고 싶은 경우에는, ReactDOM.render() 메소드를 사용한다.

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

코드펜에서 확인해 보면 "Hello, world" 가 출력되는 것을 볼 수 있다.

 

Updating the Rendered Element

React element 자체는 한번 지정된 이후 변경 할 수 없다 (immutable). 일단 element를 생성하고 나면, 해당 element의 속성이나 하위 요소들을 수정할 수 없다. 영화를 구성하는 여러 프레임 중에 하나처럼, element 는 특성 시점만의 UI를 표현하는데 사용된다.

이전 문서까지 설명된 내용에 따라 화면의 UI를 변경하고 싶은 경우에는, 새로운 element를 생성한뒤 ReactDOM.render() 메소드를 다시 사용해야 한다.

 
xxxxxxxxxx
function tick() {
  // 새로운 element 를 생성 
  const element = {
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  };
  // 새롭게 생성한 element를 매번 root DOM에 렌더링. 
  ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000); // 1초에 한번 씩 tick 을 호출하여 새로운 UI를 렌더링 한다.

위의 예제 코드는 매 초마다 tick() 함수를 호출하여 새롭게 UI 를 갱신하는 코드이다.

Note 실제로는 ReactDOM.render() 메소드는 앱 내에서 단 한번만 호출되는 것이 대부분이다. 다음 문서에서 설명할 내용을 통해 stateful components를 통한 encapsulation을 배울 수 있다.

 

React Only Updates What's Necessary

React DOM 은 UI를 갱신하기 전에 이전에 존재하던 element들과 비교하여, 변경사항이 있는 부분만을 업데이트한다.

위에서 제시한 예제 코드와 브라우저 개발자 도구를 통해 쉽게 확인 할 수 있다.

매 초마다 UI의 전체 화면을 구성하여 렌더링 함에도 불구하고, 시간을 표시하는 텍스트 노드만이 업데이트 되는 것을 확인할 수 있다.

변경사항이 있을 때, UI를 어떤 방법을 통해서 변경할 지를 생각하기 보다는, 변경된 시점에 UI의 모습이 어떤 모습이어야 하는지를 파악하고 해당 시점의 UI를 구성하는 것이 효과적이다.