리액트 3 - 엘리먼트 렌더링

오늘 알아 볼 것.

• 엘리먼트 렌더링

엘리먼트?

• 엘리먼트는 React 앱의 가장 작은 단위이며 화면에 표시할 내용을 기술한다.
• React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다.

엘리먼트 렌더링하기

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

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

엘리먼트 업데이트

• React 엘리먼트는 불변객체이다.

불변객체
생성 후 그 상태를 바꿀 수 없는 객체를 말한다.
const 데이터 멤버를 사용하는 경우 같이 일부 속성만 불변인 것도 있다.

현재까지의 내용으로 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);

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교해서 필요한 경우에만(변경된 부분만) DOM을 업데이트 한다.