위워크 커피 존맛
1. React를 위한 DOM개념
DOM이란 (Document Object Model)의 약자로
객체를 통해 구조화된 문서를 표현하는 방법이다.
DOM은 트리형태로 되어 있어서 특정 node를 찾을 수도 있고 수정하거나 제거 할 수도 있고 동적인 UI에 최적화 되어 있지 않기 떄문에 jQuery를 사용하여 동적인 효과를 줄 수도 있다.
하지만 큰 규모의 웹 어플리케이션 예를 들어 트위터, 페이스북에서는 스크롤을 내리다 보면 수많은 데이터가 로딩이 되고 각 데이터를 표현하는 요소도 많아지게 된다.
이와같은 요소의 수가 몇백개,몇천개 단위로 많아진 상태에서 DOM에 직접 접근하여 변화를 주다보면 성능상 이슈가 발생하기 마련이다.
그 이유는 DOM이 절대 속도가 느려서 그런게 아니라, 브라우저 단에서 DOM의 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고 웹 페이지를 repaint하는데서 시간이 허비되기 때문에 느려진다고 할 수 있다.
(참고: 레이아웃 구성을 reflow라 하며, 색상변경 같은 레이아웃에 관계 없는 것들은 repaint라고 한다.)
즉, 웹브라우저 등의 Client Side의 로직 때문에 어플리케이션의 속도가 느려진다고 볼 수 있다.
이러한 HTMl마크업을 시각적인 형태로 변환하는 시간이 드는 것은 어쩔 수 없다. 따라서 최소한의 DOM 조작을 통해 작업을 처리하는 방식을 이를 개선 할 수 있다.
그중에 DOM작업을 가상화 하여 미리 처리한 다음 한꺼번에 적용할 수 있는 방법이 있다.
그게 바로 Virtual DOM이다.
2. Virtual DOM
virtual DOM이란?
virtual DOM을 이용하면 실제 DOM에 접근하여 조작하는 대신에, 이를 추상화시킨 자바스크립트 객체를 구성하여 사용합니다.
좀 더 이해하기 쉽게 실제 DOM의 가벼운 사본이라고 생각하면 편하다.
쉽게 말해서 DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하는 기능입니다. 이처럼 사용하게 되면 성능 향상도 기대해 볼 수 있고 virtual DOM은 DOM의 상태를 메모리위에 계속 올려두고 DOM에 변경이 있을 때만 해당 변경을 반영한다.
virtual DOM 업데이트 절차
React에서 데이터가 변하여 브라우저 상의 실제 DOM에 업데이트 하는 과정은 3가지 절차를 밟는다.
- 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링 한다.
- 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교한다.
- 바뀐 부부만 실제 DOM에 적용이 된다.
(컴포넌트가 업데이트 될때, 레이아웃 계산이 한번만 이루어짐)
즉, React는 지속해서 데이터가 변화하는 대규모 어플리케이션 구축을 위해 탄생하였다.
