[React] ReactDOM

ReactDOM은 자바스크립트 라이브러리 중 하나로, React와 DOM 사이의 다리 역할을 합니다.

DOM(Document Object Model)이 웹페이지의 실제 인터페이스라면 React는 Virtual DOM을 생성해서 작동합니다. ReactDOM은 변경된 구성 요소들을 Virtual DOM에 전달하고, 실제 DOM에서 렌더링하는 과정을 담당합니다. Virtual DOM 자체는 아니지만, Virtual DOM을 바탕으로 UI를 효과적으로 변경한다고 생각하면 됩니다.

 

먼저 ReactDom을 사용하기 위해서 다음과 같이 import를 해야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';

 

다음은 ReactDOM을 활용해서 HTML 요소를 실제 DOM에 렌더링한 예시입니다. 

const element = (
  <div>
    <h1>Hello World!</h1>
    <p>Lorem ipsum dolor sit amet. </p>
  </div>
);
ReactDOM.render(element, document.getElementById('exline1'));

 

exline1이라는 id를 가진 div 태그가 존재한다고 했을 때, 먼저 document.getElementById('exline1')을 통해서 div 태그를 찾습니다. 그리그 그 div 태그에 element에 저장되어 있는 HTML 코드를 렌더링해서 웹페이지에 보여주게 됩니다.