[React 톺아보기] 2. 엘리먼트 렌더링(렌더링 원리)

 

이번 포스팅에서는 React의 기본적인 동작인 엘리먼트 렌더링에 대해서 다루겠습니다.

 

1. 엘리먼트란?

React의 엘리먼트란 "React 애플리캐이션을 구성하는 블록"입니다.

const element = <div id="root">Hello World</div>;

엘리먼트는 위의 코드처럼 화면에 보이는 것들을 기술하며, 한 번 생성된 이후에는 자식이나 속성을 변경할 수 없습니다.

 

2. 엘리먼트 렌더링

먼저 DOM이란 Document Object Model의 약자로 웹의 문서 객체 모델입니다. 

페이지를 구성하는 모든 엘리먼트들은 React DOM에서 관리합니다. 엘리먼트를 렌더링하기 위해서는 DOM 엘리먼트를 ReactDom.createRoot()에 전달한 다음, React 엘리먼트를 root.render()에 전달해야 합니다.

저번 포스팅에서는 CRA로  React의 개발 환경을 구축하고 npm start 명령어를 통해서 페이지를 실행했었습니다. 이 과정이 페이지를 렌더링하는 과정입니다. src 디렉토리에 index.js를 보겠습니다.

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

위의 코드를 보면 ReactDom.creatRoot()에 DOM 엘리먼트를 전달합니다. DOM 엘리먼트는 getElementById('root')에 의해 해 호출되는데 index.html파일에 들어가보면 id="root"인 태그가보입니다.

정리하자면, id값으로 DOM을 불러와서 ReactDOM.createRoot()로 엘리먼트를 렌더링한 것입니다. 이것을 루트 DOM 노드라고 부릅니다. React는 하나의 루트 DOM 노드를 가집니다. 이 내용은 SPA(Single Page Application)와도 관련이 있습니다.

 

3. 렌더링한 엘리먼트 업데이트하기

React에서 한 번 생성한 엘리먼트는 변경할 수 없다고 했습니다. 그러나 웹페이지를 보면 화면을 변화시켜야 하는 경우가 있습니다. React의 공식 문서의 현재 시각을 불러오는 예제를 보면 화면이 시각에 따라 변합니다.

어떤 과정이 일어나는지 알아보기 위해 개발자 도구를 통해서 살펴보면 엘리먼트가 매 초 재렌더링되는 것이 보입니다.

 

React는 가상의 DOM을 이용하여 상태의 변화가 일어나면 그 부분만 다시 렌더링하는 방식으로 화면을 업데이트합니다. 리액트의 가상 DOM에 대한 내용은 기회가되면 자세히 포스팅하겠습니다. 지금은 간단한 원리만 알고 넘어가면 됩니다.

 

3. 정리

정리하자면, React는 최초의 로딩시 root DOM 노드 하나만 렌더링하고 필요한 부분만 변경하는 방식으로 화면을 업데이트합니다.

지금까지 React의 기본 동작인 엘리먼트 렌더링을 이해했습니다. 다음 포스팅에서는 React의 JSX를 다루어 보겠습니다.