React - virtual DOM이란

DOM이란?

- DOM(Document Object Model)이란, 객체를 통해 구조화된 문서를 표현하는 방법이다.

- DOM은 트리형태로 되어 있어서 특정 node를 찾을 수도 있고 수정하거나 제거 할 수 있다.

 

Virtual DOM이란?

- VirtualDOM을 이용하면 실제 DOM에 접근하여 조작하는 대신에, 이를 추상화시킨 자바스크립트 객체를 구성하여 사용한다.

- DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영하는 기능이다.

가상 DOM은 DOM의 상태를 메모리 위에 올려두고 DOM에 변경이 있을 때만 해당 변경을 반영한다.

- 리액트가 모든 처리를 대신 해주기 때문에 DOM API 조작 작업을 신경쓸 필요가 없다.

 

React DOM이란?

- React DOM이란 Virtual DOM에서 HTML을 생성하는 데 필요한 라이브러리이다.

- React DOM에는 리액트 엘리먼트를 브라우저에 렌더링하는데 필요한 모든 도구가 들어 있다.

- render 메소드와 서버에서 사용하기 위한 renderToString과 renderToStaticMarkup 메소드가 있다.

 

Virtual DOM을 사용하는 이유?

- 큰 규모의 웹을 사용할 경우 스크롤을 내리다보면 수많은 데이터 로딩이 되고 각 데이터를 표현하는 요소도 많아지게 된다. 이와 같은 요소의 갯수가 몇백개 몇천개 단위로 많아진 상태에서 DOM에 직접 접근하여 변화를 주면 성능상 이유가 발생하게 된다. 

 

DOM자체가 javascript엔진에 비해 느려서가 아니라, 브라우저 단에서 DOM의 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고 웹 페이지를 다시 그려야 하기 떄문에 시간적인 소모가 심해진다.

 

하지만 Virtual DOM을 사용하면 최소한으로 DOM을 실행하기 떄문에 성능이 느려지지 않는다.

 

DOM 업데이트 절차

React에서 데이터가 변하여 브라우저 상의 실제 DOM에 업데이트 하는 과정은 3가지 절차가 진행된다.

1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링 한다.

2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용이 된다. (컴포넌트가 업데이트 될때, 레이아웃 계산이 한번만 이루어짐)

 

결국, React는 지속해서 데이터가 변화하는 대규모 애플리케이션 구축에 적합하다. 그리고 추가적으로 React에서 추가된 Redux를 사용하면 Flux패턴(단방향)을 사용하게 된다.

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어