react - 주요개념#3 엘리먼트 렌더링(element rendering)

엘리먼트

  - react의 가장 작은 단위!

 

  - 화면에 표시할 내용을 기술

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

 

 *  브라우저 DOM과 달리 react element는 일반 객체(plain object) 이며 쉽게 생성 가능!

 

 주의

  - component와 element를 혼동할 수 있는데 element는 component의 구성요소! 명확히 알고 가자!

 

 

DOM에 element 렌더링하기!

 

HTML 파일 어딘가에 <div>가 있다고 생각하자!

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

 

이안에 들어가는 모든 element들을 React DOM이 관리하기 때문에 이 div를 루트(root) DOM 노드라고 부른다!

 

 React로 구현된 애플리케이션들은 일반적으로 한개의 루트 DOM 노드가 있다

 

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

 

React element를 루트 DOM 노드에 렌더링 하려면 ReactDOM.render()를 사용하면 된다!

 

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

 

 

rendering된 element update하기

React element는 불변객체!

 

element를 생성한 이후에는 해당 element의 자식이나 속성을 변경할 수 없다!

 

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

 

현재까지의 내용을 바탕으로 하면 UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 

 

ReactDOM.render()로 전달하는 것이다!

 

  * 의문점 ----> UI를 업데이트하는 방법이.. 위에 내용이.. ..진짜 유일한건가?

 

아래는 그 예시 코드이다!

 

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 app은 ReactDOM.render()를 한번만 호출한다 

 

 react - 주요개념을 차례차례 읽다보면 해당 내용을 어떻게 바꿔 쓰는지 알 수 있을 것!!

 

 

변경된 부분만 업데이트하는 React!

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 변경된 내용이 있을 경우에만

 

DOM을 업데이트 한다!

 

-> 이 경우 전체가 다 업데이트 되는게 아니고 변경된 부분만 업데이트 된다!!

 

       아주 똑똑한 놈이다..