Element Rendering

Element Rendering은 화면에 출력할 DOM 노드의 정보를 React에게 전달하는 수단

Element는 React에서 화면 출력을 구성하는 가장 작은 단위이다.

React에서 엘리먼트는 일반 객체이기 때문에 쉽게 생성할 수 있으며 React DOM은 React 엘리먼트와 비교하여 DOM을 업데이트한다.

Rendering 방법

React에서 모든 엘리먼트는 React DOM, 또는 Root DOM 노드에서 관리한다.

또한 Root DOM 노드에 엘리먼트를 렌더링하려면 ReactDOM.render()를 사용해 전달하면 된다.

DOM에 엘리먼트를 렌더링하는 방법은 다음과 같다.

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

const element = <h1>React is Cool!!</h1>;
ReactDOM.render(element, document.getElementById('root'));

위 코드를 실행하면 결과는 다음과 같다.

Rendering 업데이트

React에서 엘리먼트는 특정 시점의 UI를 출력하기 때문에 생성한 이후에는 자식, 속성등을 변경할 수 없다.

그래서 새로운 엘리먼트를 생성하고 ReactDOM.render()로 다시 전달하는 방식으로 UI를 업데이트해야 한다.

아래 코드는 setInterval의 콜백 함수를 통해 1초 단위로 ReactDOM.render()를 호출하여 화면의 UI를 업데이트한다.

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

function showClock() {
  const element = (
    <div>
      <h1>현재 시간은 {new Date().toLocaleTimeString()} 입니다.</h1>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(showClock, 1000);

Rendering 업데이트할 때는 해당 엘리먼트와 이전 엘리먼트를 비교하여 DOM을 원하는 상태로 만드는데 필요한 경우에만 업데이트한다.

위 코드를 실행해보면 전체 UI가 아닌 내용이 변경되는 텍스트 노드(<h1>)만 업데이트하는 것을 알 수 있다.

참고 자료

React 공식문서
웹 게임을 만들며 배우는 React - 제로초