다시 React! -4 Elements 렌더링

문규찬·2021년 8월 22일
0
post-thumbnail

An element describes what you want to see on the screen

브라우저 DOM 요소와 달리 React 요소는 순수한 객체입니다. React DOM은 React 요소와 일치하도록 DOM을 업데이트합니다.

-root

React로 구축한 어플리케이션은 보톤 단일 루트 DOM 노드를 가집니다. React를 기존 앱에 통합하는 경우 원하는 만큼 많은 분리된 루트 DOM 노드가 있을 수도 있습니다.

React 요소를 루트 DOM 노드에 렌더링하고 싶다면, ReactDOM.render() 에 둘 다 전달하면 됩니다.

-Updating the Rendered Element

React 요소는 변경 불가능 합니다. 한번 요소를 만들었다면, 그 자식이나 속성을 변경할 수 없습니다. 요소는 영화의 단일 프레임과 같습니다. 특정한 시간대의 UI를 보여줄 뿐입니다.

이 지식을 바탕으로 하면, UI를 업데이트할 수 있는 유일한 방법은 새로운 요소를 만드는 것이며, 이 요소를 ReactDOM.render() 로 전달하는 것입니다.

-React Only Updates What’s Necessary

React DOM은 요소와 그 자식을 이전 요소와 비교하고, DOM을 원하는 상태로 만드는 데 필요한 DOM 업데이트만 적용합니다

function tick() {
  const element = (
    <div>
      <h1>hello</h1>
      <h1>It is {new Date().toLocaleTimeString()}</h1>
    </div>
  );
  ReactDOM.render(element, document.getElementById("root"));
}

setInterval(tick, 1000);

매 틱마다 전체 UI 트리를 설명하는 요소를 만들었지만, 내용이 변경된 텍스트 노드만 React DOM에 의해서 업데이트 됩니다.

0개의 댓글