리액트 주요개념 - 엘리먼트 렌더링

엘리먼트(Element)란?

React 앱의 가장 작은 단위로 화면에 표시할 내용을 기술합니다.

브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. 이때, 객체는 type(문자열 혹은 컴포넌트 함수, 클래스) 필드와 props(객체) 필드를 가집니다.

일반적으로 JavaScript의 React.createElement() 함수 또는 JSX의 태그 문법으로 작성합니다.

돔 엘리먼트: 엘리먼트의 type이 태그 이름에 해당하는 문자열인 경우
해당 태그를 가진 DOM 노드를 표현하며, props 정보를 통해 해당 노드의 속성들을 표현
예) <div className = "user_info"> </div>

 

DOM에 엘리먼트 렌더링하기

vscode에서 리액트를 생성하면 html 파일에 다음과 같은 코드가 생성됩니다.

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

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 루트(root) DOM 노드라고 부릅니다.

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있는데 React를 기존 앱에 통하하는 경우 원하는 만큼의 독립된 루트 DOM 노드가 있을 수 있습니다.

React 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달하면 됩니다.

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

렌더링 된 엘리먼트 업데이터하기

React 엘리먼트는 불변객체입니다.

따라서 UI를 업데이트하는 방법은 새로운 엘리먼트를 생성하고 이를 React.render()로 전달하는 것입니다.

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() 콜백을 이용해 1000ms(1초)마다 ReactDOM.render()를 호출합니다.

 

변경된 부분만 업데이트하기

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트합니다.

위의 예제를 실행한 후 개발자 도구(F12)를 이용해 살펴보면 시간을 나타내는 <h2>태그 부분만 업데이트되는 것을 확인할 수 있습니다.