React 란?

React 는 React.js, ReactJS라고도 불리며, User Interface (UI)를 만드는데 사용하는 오픈 소스 자바스크립트 라이브러리이다. Facebook에서 만들어졌고 AngularJS, Vuejs와 함께 웹 프론트엔드 3대장 중 하나이다. Single Page Application(SPA)를 전제로 하고, Virtual DOM을 활용하여 필요한 부분만 리렌더링이 가능하여 퍼포먼스가 좋다. React는 일부에서 프레임워크로 인식이 되고 있는데, 엄연히 따지면 React는 라이브러리이다. 따라서, 다른 프레임워크와 간편하게 붙혀서 사용이 가능하다. 최근 Vuejs와 함께 필드에서 가장 많이 쓰이고 있다.

React에 대한 기초 문법 등은 다루지 않으려한다. 이 글은 Virtual DOM에 초점을 맞춘다.

Virtual DOM 이란?

Virtual DOM 은 말 그대로 가상 DOM이다. DOM의 가상 버전이라는 얘기다. 그렇기에, Virtual DOM 정리 전에 먼저 기존 DOM에 대해서 정리가 필요하다.

DOM 이란?

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

reference: https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction


말이 너무 어렵다.

간단하게 정리하면, DOM은 브라우저와 자바스크립트가 HTML을 이해하기 쉽게 트리 구조로 표현한 객체다. DOM은 웹 페이지의 객체 지향 표현이고, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 기본적으로 자바스크립트에는 DOM을 조작할 수 있는 DOM API들을 제공한다.


글을 적으며 참고한 페이지 중, DOM과 Virtual DOM을 설명할 때 필요한 브라우저의 Workflow에 대해서 쉽게 정리가 잘 된 것을 가져와 보았다.

https://velog.io/@sbinha/React%EC%97%90%EC%84%9C-Virtual-DOM

Browser Workflow

우리는 웹브라우저를 통해 원하는 페이지로 이동을 할 때 도메인을 이용한다. 도메인 주소로 접속을 하면 DNS 서버로 가서 실제 주소(서버)에 요청을 한다. 요청 후 서버는 해당 웹페이지의 index.html 등의 파일을 Response 해준다. 이 Response 파일들은 이제 앞서 설명한대로 브라우저와 자바스크립트가 HTML을 이해하기 쉽게 트리 구조로 표현된다.

Response files -> DOM Tree -> CSSOM(DOM + CSS) Tree -> Render Tree

Render Tree를 바탕으로 실제 화면에 웹페이지가 렌더링이 된다.

이처럼 DOM은 새로운 요청이 있으면 위와 같은 형태를 거쳐 리렌더링을 하게 된다. DOM의 속도는 느리지 않다. 하지만 매번 새롭게 구성하기 때문에, 양이 엄청 많으면 분명 퍼포먼스가 떨어질 것이다. 여기서 이제 Virtual DOM의 장점이 나오게 된다.

DOM과 Virtual DOM, React.. 그리고 결론

HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차이다. HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 되고, 이 DOM이 화면에 사용자 인터페이스를 표시한다. (Render Tree)

React는 이러한 DOM 엘리먼트를 직접 조작하지 않고, Virtaul DOM을 다뤄 React가 가상 DOM을 생성하고 브라우저가 이를 렌더링하도록 하는 방식을 따른다. 이러한 Virtaul DOM을 React 엘리먼트라고 한다. React 엘리먼트는 개념상 HTML 엘리먼트와 비슷하지만 실제로는 Javascript 객체다. 따라서 HTML의 DOM API를 직접 다루는 것보다 Javascript 객체인 React 엘리먼트를 직접 다루는 편이 훨씬 빠르다.

Virtaul DOM은 가상의 DOM이라고 설명했다. 이 말은 즉슨, 실제 DOM이 아니기 때문에 변경이 있어도 실제 DOM에는 영향이 없다 (리렌더링 되지 않는다). Virtual DOM의 역할은 DOM 변화를 감지한다.

실제 데이터가 변경되어서 리렌더링이 되어야 할 상황에 React는 기존 DOM이 아닌 Virtual DOM에 알린다. Virtual DOM은 기존의 DOM과 자신을 비교하여 변경된 부분만 DOM에 알려준다. 따라서 똑같은 부분은 변경하지 않는다. 상식적으로 웹페이지의 변화가 있을 때, 전체를 새로 불러오는 것 보다 변경된 부분만 딱 바꾸는 것이 퍼포먼스적으로 훨씬 뛰어날 것이다. Virtual DOM은 이러한 역할을 한다.

Virtual DOM은 기존 DOM의 단점을 보완했다. 하지만 항상 DOM보다 Virtual DOM이 빠르고 효과적이지 않다고 한다. React는 지속적으로 데이터가 변하는 대규모 어플리케이션에 적합하다고 나와있다. 이 말은 아주 간단한 작업에는 '굳이' 라는 말을 할 수 있다. 경우에 따라 가장 최적한 것을 사용하여 유연하게 개발하는게 가장 뛰어난 개발자인 것 같다.

reference : https://penguingoon.tistory.com/213