처음 만난 리액트 문서
4.2 Element 렌더링하기
Element를 생성한 이후에 실제로 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 합니다. 그렇다면 element를 렌더링 하려면 어떻게 해야할까요? 자, 먼저 아래에 간단한 HTML코드 하나를 보도록 하겠습니다.
<div id="root"></div>
이 HTML코드는 root라는 id를 가진 <div>태그입니다. 굉장히 단순하죠? 단순하지만 이 코드는 모든 리액트 앱에 필수적으로 들어가는 아주 중요한 코드입니다. 실제로 이 <div>태그 안에 리액트 element들이 렌더링 되며, 이것을 Root DOM node라고 부릅니다. 이 <div>태그 안에 있는 모든 것들이 리액트 DOM에 의해서 관리되기 때문입니다. 오직 리액트만으로 만들어진 모든 웹사이트들은 단 하나의 Root DOM node를 가지게 됩니다. 반면에 기존에 있던 웹사이트에 추가적으로 리액트를 연동하게 되면, 여러개의 분리된 수많은 Root DOM node들을 가질 수도 있습니다. 아까 앞에서 봤던 Virtual DOM 그림에서 가장 최상단에 있는 동그라미가 바로 Root DOM node라고 보면 됩니다.
위에서 나왔던 root <div>에 실제로 리액트 element를 렌더링 하기 위해서는 아래와 같은 코드를 사용합니다.
const element = <h1>안녕, 리액트!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);
이 코드는 먼저 element를 하나 생성하고, 생성된 element를 root div에 렌더링 하는 코드입니다. 렌더링을 위해 ReactDOM의 createRoot()함수를 사용해서 만든 root의 render() 함수를 사용하게 됩니다. 이 함수는 파라미터로 받은 리액트 element를 Root DOM node에 렌더링하는 역할을 합니다. 여기서 다시 한 번 리액트의 element와 HTML의 element는 다른 개념이라는 것을 유의해주세요. 리액트의 element는 리액트의 Virtual DOM에 존재하는 것이고, HTML element는 실제 브라우저의 DOM에 존재하는 것입니다. 결국 리액트의 element가 렌더링되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정이라고 할 수 있습니다.
마지막 업데이트: 2025년 08월 26일 02시 01분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page