TIL
What I Learn?
1) DOM 이란?
일단 Virtual DOM 에 대해 알아보기 전에 간단하게 DOM 에 대해서 짚고 넘어가겠다.
DOM (Document Object Model) 이란 객체를 통해 구조화된 문서를 표현하는 방법이다.
DOM 은 동적인 UI 에 최적화되지 않았기 때문에 이러한 단점을 JQuery 를 사용하여 동적인 효과를 줄 수 있었다.
하지만 웹의 규모가 커질 수록 (Facebook, Twitter...) 표현해야할 데이터 요소들이 많아지게 된다.
이와같은 경우 브라우저 렌더링이 굉장히 많이 일어나게 되는데 이는 결국 유저의 피로도 증가로 이어지게 된다.
브라우저 렌더링이 일어날 경우 간단하게 다음의 과정이 일어난다.
- HTML 을 파싱하여 DOM 객체를 생성하고, CSS 를 파싱하여 스타일 규칙을 만든다.
- 위 두 개를 합쳐 Render Tree 를 만든다.
- Render Tree 를 기준으로 레이아웃을 배치하고, 색을 칠하는 등의 작업을 한다.
Facebook 같이 실시간으로 많은 양의 데이터가 바뀌는 앱 같은 경우 위 과정이 계속 반복 된다는 것이다.
2) Virtual DOM 이란?
위와 같은 현상을 해결하기 위해 Virtual DOM 의 개념이 등장했다.
Virtual DOM 이란 쉽게 말해서 가상의 DOM 이란 뜻으로 이해하면 된다.
이는 실제로 DOM 에 접근하여 조작하는 것이 아닌, 이를 추상화 시킨 자바스크립트 객체를 구성하여 사용하는 것이다.
그전에는 변경사항을 바로바로 DOM 에 적용해 계속해서 렌더링 했다면, 이제는 Virtual DOM 을 통해 변경 내역을 한 번에 모으고, 실제 DOM 과 차이를 판단한 후, 구성 요소의 변경이 된 부분만 찾아 변경하는 것이다.
3) React 에서의 Virtual DOM
React 에서 데이터가 변하여 브라우저 상의 실제 DOM 에 업데이트 하는 과정은 다음의 과정을 밟는다.
-
데이터가 업데이트 되면, 전체 UI 를 Virtual DOM 에 리렌더링 한다.
-
이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교한다.
-
바뀐 부분만 실제 DOM 에 적용이 된다.
위 내용을 통해 곧 React 는 지속해서 데이터가 변화하는 대규모 애플리케이션 구축을 위해 탄생했다는 것 까지 알 수 있다.
