4.Rendering Elements - 2)Elements의 특징, 3)(실습) 시계 만들기

2)Elements의 특징

• 불변성(Immutable), 한번 생성된 엘리먼트는 변경 불가
• Elements 생성후에는 children이나 attributes를 바꿀 수 없다
• 즉, Elements는 다양한 모양으로 존재할 수 있으나 생성후에는 변경 불가하다
• Elements를 변경하고 싶다면, 새로 만들어 바꿔치기하면 된다
• 빠른 랜더링과, 가상 돔(DOM)을 이용해서 바꿔치기 한다

elements 생성 후에는 렌더링

ex)

<div id=“root”></div> // 리액트 엘리먼트들이 랜더링 됨

• rootDOM 노드
• 리액트DOM에 의해서 관리됨
• 리액트로만 만들어진 사이트는 단 하나의 rootDOM 노드를 가짐
• 반면에, 기존에 만들어진 사이트에 추가로 리액트를 연동하면 여러개의 분리된 rootDOM 노드를 가질 수 있음

ex)
  const element = <h1>안녕, 리액트!</h1>;	// 엘리먼트 생성
  ReactDOM.render(element, document.getElementById(‘root’)); 
  // root div에 렌더링하는 코드
  // render(리액트 엘리먼트, 돔 엘리먼트) 
  // 리액트 엘리먼트(가상 돔)
  // 돔 엘리먼트(실제 브라우저)

ex)
  function tick() {
      const element = (
          <div>
              <h1>안녕, 리액트!</h1>
              <h2>현재 시간: { new Data().toLocaleTimeString()}</h2>
          </div>
      );

      // 엘리먼트를 생성한다.
      ReactDOM.render(element, document.getElementById(‘root’));
  }

  // 1초마다 엘리먼트를 새로 생성한다.
  setInterval(tick, 1000);

3)(실습) 시계 만들기