[React Document] 엘리먼트 렌더링

이 포스팅은 React Document 주요개념 엘리먼트 렌더링 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다.

🔧 Element Rendering

Element는 React에서의 가장 작은 단위를 의미합니다.
Element는 사용자 화면에 표시하기 위한 내용을 기술한다.

앞에 내용에 있던 코드가 위의 내용과 같습니다.

const name = <h1>Hello YundleYundle</h1>

💡 DOM에 Elemenet Rendering 하기

나중에 해당 예제가 무엇을 의미하는지 알수있겠지만 지금은 모른다는 가정하에 보겠습니다
HTML의 DOM 어딘가에 id가 root 인 div가 있다고 가정하겠습니다.

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

React App에는 기본적으로 모든 Element를 React DOM에서 관리하기 때문에 이와같은 DOM을 루트(root) DOM 노드라고 부릅니다.

추후에 create-react-app으로 만들어진 App을 보면 root id를 가지고 있는 div Element를 확인할 수있습니다.

const app = <App />
ReactDom.render(app , document.getElementById('root'));

💡 Rendering된 Element 업데이트 하기

React의 Element는 불변객체 입니다. Element를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다. 따라서 새로운 UI 를 업데이트 하는 방법은 새로운 Element를 만들고 새로 만들어진 Element를 render로 전달하는 방법입니다.

예제는 실제 React Document 에 있는 코드를 활용하겠습니다.

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

위의 코드는 setInterval을 이용하여 tick 함수를 1초마대 새로 렌더링 하는 예제입니다.

React라 생각안하고 당장 코드만 본다면 1초마다 element를 전부 새로 갱신한다고 생각할 수 있겠지만 React DOM은 해당 엘리먼트와 그 자식엘리먼트를 이전에 있던 엘리먼트와 비교하여 차이점이 있는부분만 새로 업데이트 합니다.