React - virtual DOM의 개념

React를 위한 DOM개념

DOM이란 (Document Object Model)의 약자로 객체를 통해 구조화된 문서를 표현하는 방법입니다.

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

DOM은 동적인 UI에 최적화가 되어 있지 않기 때문에 JQuery를 사용하여 동적인 효과를 줄 수 있습니다.

하지만 큰 규모의 웹 어플리케이션(ex) 트위터,페이스북) 에서는 스크롤을 내리다 보면 정말 수많은 데이터가 로딩이 되고 각 데이터를 표현하는 요소도 많아지게 됩니다. 

이와같은 요소의 갯수가 몇백개 몇천개 단위로 많아진 상태에서 DOM에 직접 접근하여 변화를 주다보면 성능상 이슈가 발생하게 됩니다.

이는 DOM자체가 javascript엔진에 비해 느려서 그런 것이 아니라, 브라우저 단에서 DOM의 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고 웹 페이지를 repaint 하는데서 시간이 허비되기 때문에 느려진다고 할 수 있습니다. 

(레이아웃 구성을 reflow라고 하고, 색상변경 같은 레이아웃에 관계 없는 것들은 repaint라고 합니다.)

즉 웹브라우저 등의 클라이언트 side의 로직 때문에 어플리케이션의 속도가 느려진다고 볼 수 있습니다.

이러한 HTML마크업을 시각적인 형태로 변환하는 시간이 드는 것은 어쩔 수 없습니다. 따라서 최소한의 DOM 조작을 통해 작업을 처리하는 방식으로 이를 개선 할 수 있습니다.

그중에 DOM작업을 가상화 하여 미리 처리한 다음 한꺼번에 적용할 수 있는 방법이 있습니다.

Virtual DOM이란?

virtual DOM을 이용하면 실제 DOM에 접근하여 조작하는 대신에, 이를 추상화시킨 자바스크립트 객체를 구성하여 사용합니다. (실제 DOM의 가벼운 사본)

Virtual Dom이란 => 쉽게 말해서?

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

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

실제 DOM에 업데이트 하는 절차

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

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

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

3. 바뀐 부분만 실제 DOM에 적용이 됩니다.

(컴포넌트가 업데이트 될때 , 레이아웃 계산이 한번만 이뤄짐)

즉 REACT는 지속해서 데이터가 변화하는 대규모 애플리케이션 구축 을 위해서 탄생하였습니다.