[프론트엔드] React 동작 구조 (가상 DOM)

 

React

 

React 는 React.js, ReactJS라고도 불리며, User Interface (UI)를 만드는데 사용하는 오픈 소스 자바스크립트 라이브러리입니다. Facebook에서 만들어졌고 AngularJS, Vuejs와 함께 웹 프론트엔드 3대장 입니다.

Single Page Application(SPA)를 전제로 사용하고, Virtual DOM을 활용하여 필요한 부분만 리렌더링이 가능하여 퍼포먼스를 향상시킬 수 있습니다.

 

 

 

Virtual DOM

 

Virtual DOM 은 말 그대로 가상에서  사용되는 DOM객체를 말합니다.  그렇기에, Virtual DOM 정리 전에 먼저 기존 DOM에 대해서 알고가야 할 필요가 있습니다.

 

DOM

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 인터페이스 역할을 합니다.

 

DOM은 브라우저와 자바스크립트가 HTML을 이해하기 쉽게 트리 구조로 표현한 객체를 말합니다.

DOM은 웹 페이지의 객체 지향 표현이고, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정이 가능합니다. 자바스크립트에는 DOM을 조작할 수 있는 DOM API들을 기본적으로 제공합니다.

 

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

Virtual DOM

 

 

Browser Workflow

 

우리는 웹브라우저를 통해 원하는 페이지로 이동을 할 때 도메인을 이용합니다. 도메인 주소로 접속을 하면 DNS 서버로 가서 실제 주소(ip)에 요청 합니다. 요청 후 서버는 해당 웹페이지의 index.html 등의 파일을 Response로 반환합니다.

Response 파일들은 이제 앞서 설명한대로 브라우저와 자바스크립트가 HTML을 이해하기 쉽게 트리 구조로 표현되고 있습니다.

 

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

 

DOM 새로운 요청이 생기면 위와 같은 구조로 리렌더링을 하게됩니다. 매번 새롭게 DOM을 구성하기 떄문에 요청이 많을경우 퍼포먼스에 영향이 발생합니다. 이러한 문제를  Virtual DOM 의 장점을 통해서 해결할 수 있습니다.

 

 

Virtual DOM의 역할

Virtaul DOM은 가상의 DOM이라고 설명되어 있습니다. 즉 실제로 존재하는  DOM이 아니기 때문에 변경이 있어도 실제 DOM에는 영향이 발생하지 않습니다. (리렌더링 x). Virtual DOM의 역할은 DOM 변화를 감지하는 것에 있습니다.

실제 데이터가 변경되어서 리렌더링이 되어야 할 상황에 React는 기존 DOM이 아닌 Virtual DOM에 요청을 알리게 됩니다.

Virtual DOM은 기존의 DOM과 자신을 비교하고  변경된 부분만 DOM에 요청을 통해서 알려주게 됩니다.

따라서 똑같은 부분은 변경하지 않고 수정이 필요한 부분만 수정하게 됩니다.  웹페이지의 변화가 있을 때, 전체를 새로 불러오는 것 보다 변경된 부분만 수정하는 것이 퍼포먼스상으로 훨신 좋습니다.

 

 

 

Virtual DOM은 기존 DOM의 퍼포먼스의 단점을 보완 하였습니다. 하지만 항상 DOM보다 Virtual DOM이 빠르고 효과적이지는 않다고 합니다. React는 지속적으로 데이터가 상시 변하는 대규모 어플리케이션에 적합하다고 설명하고 있습니다. 따라서 간단한 작업에는 사용할 필요가 없고 규모가 있는 대형 프로젝트에 적합할것으로 생각됩니다.