[영어로 배우는 React] 3. 엘리먼트 랜더링

공식 페이지 : https://reactjs.org/docs/rendering-elements.html

 

1. html DOM으로 리액트 엘리먼트 렌더링하기

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

html 안에 위와 같은 DOM이 있습니다. 우리는 이것을 'root' DOM 노드라고 부르는데, 이 안에 있는 모든 것이 React Dom으로 관리될 것이기 때문입니다. 리액트로 만들어진 애플리케이션은 보통 하나의 root DOM 노드를 가집니다. 만약 기존 앱에 리액트를 통합하려고 한다면, 많은 독립된 root DOM 노드를 가지고 있을지도 모릅니다. 

 

리액트 앨리먼트를 랜더링하기 위해서 DOM 앨리먼트를  ReactDOM.createRoot()에 인수로 넘겨주고, 이후 리액트 앨리먼트를 root.render()에 인수로 넘겨주면 됩니다. 아래와 같이 처리하면, Hello, world가 출력됩니다. 

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

 

2. 렌더링 된 엘리먼트를 업데이트 하기

 

리액트 앨리먼트는 변경할 수 없습니다. 앨리먼트를 하나 만들면 자식 앨리먼트나 속성을 변경할 수 없습니다. 앨리먼트는 영화에서 단일 프레임과 같다고 보시면 됩니다. 앨리먼트는 정확한 위치와 정확한 시간에 UI를 표현합니다. 지금까지의 지식으로 UI를 업데이트 할 수 있는 유일한 방법은 새로운 앨리먼트를 만들고, 그 앨리먼트를 root.render()로 랜더링 하는 것입니다. 아래의 똑딱 시계 예를 한번 보시죠.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);}

setInterval(tick, 1000);

이 예제는 매초 tick 함수를 호출합니다. 아래는 CodePen을 이용한 실습 내용을 녹화한 겁니다. 

Try it on CodePen

 

3. 리액트는 꼭 필요한 것만 업데이트한다.

리액트는 필요한 것만 업데이트합니다. React DOM은 앨리먼트와 그 자식 앨리먼트를 이전의 것과 비교합니다. 

그래서 원하는 상태를 위해 필요한 DOM 업데이트들만 적용시킵니다. 비록 매 순간마다 전체 UI를 만들기는 하지만 변경된 text node만 적용된 것을 볼 수 있습니다.