Virtual DOM을 알기 전에 DOM의 문제점부터 알아보자.
DOM조작이 전체 동작을 비효율적으로 만드는게 아니라, 그 이후에 일어나는 일 떄문에, 작업이 더뎌진다. 브라우저 동작 원리는 보게되면
- DOM Tree 생성
- Render Tree 생성
- Layout
- Painting 이 작업들이 이루어지게 되는데, DOM에 변화생기면, 렌더트리를 재생성하고 (그러면 모든 요소들의 스타일이 다시 계산됩니다) 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복되게 된다. 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생하는데 그 뜻은 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만듭니다.
이런 문제점을 해결하기 위해 나온 Virtual DOM
Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다.
이처럼 변경 할 부분만 Virtual DOM에서 변경을 하고 실제 DOM에 적용시킨다.
Comments (0)