Rendering Elements

Element는 React app의 가장 기본적인 구성요소이다.

하나의 Element는 화면을 구성하게 된다.

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

Rendering an Element into the DOM

당신의 HTML 파일에 <div>가 있다고 가정하자.

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

위의 노드는 Root라고 불리며 Root안의 모든 것들은 React DOM에 의해 관리된다.

React로만 이루어진 어플리케이션은 주로 하나의 Root Node를 가진다. 만약 React를 기존앱에 통합하는 형태라면 당신은 많은 Root Node를 가질 것이다.

React Element를 root DOM node로 렌더링 하기 위해서는 ReactDOM.render()를 사용한다.

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

Updating the Rendered Element

React Element는 상수이다. 변하지 않는다. 따라서 자식이나 속성을 바꿀수 없다. 마치 영화에서의 하나의 프레임의 역할을 한다.

아래는 ticking clock의 한 예시이다.

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

React Only Updates What's Necessary!

React DOM은 Element와 그 자식을, 그 이전의 상태와 비교하여, 꼭 필요한 업데이트만 진행한다.