React - 7) DOM, Rendering

DOM

DOM은 Document Object Model의 약자로 구조화된 문자들의 표현이다. 웹 개발자들에게는 이 문자가 HTML 코드를 의미할 것 이며, 이때 DOM은 단순하게 HTML DOM이라고 불린다. HTML의 요소들은 DOM의 노드가 된다. 따라서 HTML이 문자이고, DOM은 이 문자들의 메모리 내 표현인 것이다.

브라우저는 HTML 문자를 이해할 수 없기 때문에, 브라우저가 이해하고 활용할 수 있도록 변환이 필요하다. DOM은 브라우저 렌더링 엔진의 HTML parser에 의해 생성된 트리 구조의 Node 객체 모델이다. DOM은 자바스크립트를 사용하여 문서에 대한 추가, 삭제, 이벤트 처리 등을 처리하는 인터페이스를 제공한다.

 

웹 페이지의 내용을 동적으로 변경하고자 할 때마다 DOM을 수정한다.

 

Virtual DOM

HTML DOM은 항상 트리 구조로 되어 있고, 오늘날 DOM tree의 크기는 매우 크다. 동적 웹 애플리케이션(Single Page Applications - SPAs)이 매우 많이 등장하고 있으므로 상호작용을 통해 DOM 트리를 끊임없이 수정해야하는 요구가 많아지고, 이는 큰 overhead를 가져온다. DOM을 수정하는 일은 수반되는 비용이 크기 때문에, 성능저하를 최소화하기 위해서는 결국 DOM을 최소한으로 수정해야한다. 이러한 문제점을 해결하기 위해 Virtual DOM이 등장하게 되었다.

 

Virtual DOM은 HTML DOM의 추상화로 실제 DOM의 구조와 비슷한, React 객체의 트리이다. 개발자는 직접 DOM을 수정하지 않고 Virtual DOM을 통해 작업을 수행한다. 이 수정된 Virtual DOM을 React에서 적절하게 DOM에 반영하는 작업을 한다. 직접 DOM에 접근해서 수행하는 복잡한 과정들을 자동화, 추상화해주는 역할을 수행한다.(DOM 자체가 추상화이므로 Virtual DOM은 추상화의 추상화이다.)

 

React DOM

React는 유저 인터페이스를 만들기위한 라이브러리이고, ReactDOM은 웹의 인터페이스로 실제 HTML요소를 화면에 불러오는 역할을 한다.

props, state, context가 변할 때마다 React가 그것들을 쓰는 컴포넌트를 업데이트하고, 컴포넌트가 화면에 새로운 내용을 띄우려는지 확인한다. 만약 새 내용이 있다면, React가 ReactDOM에 전달하여 새 화면(컴포넌트)를 화면에 띄우도록 요청한다.

 

Rendering

파일 어딘가에 <div>가 있다고 가정하자.

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

이 안에 들어가는 모든 element를 React DOM에서 관리하고, 이것을 “루트(root)” DOM 노드라고 부른다. Root는 원래 HTML에 존재하는 요소로, 모든 React 콘텐츠가 들어있다. 즉, root에 대한 react Rendering은 App이 render하는 모든 것이 해당 요소에 포함된다는 것을 의미이다.

React로 구현된 app은 일반적으로 하나의 root DOM 노드가 있다. (React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다.) React 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달한다.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));