Real DOM
DOM (Document Object Model) 은 문서 객체 모델 이다.
DOM은 브라우저에서 JavaScript 와 같은 스크립트 언어가 html으로 이루어진 문서를 접근하여 조작하기 쉽게 하기위해 html 문서를 트리의 형태 로 구조화한 모델이라고 생각하면 된다.
JavaScript 에서 html 문서의 태그를 가져오기 위해서 사용하는 document.querySelector() 같은 것들이 DOM API 이다.
DOM 은 왜 tree 구조를 가지는가?
자료구조 알고리즘에서 tree 구조는 신속한 자료 탐색 성능 을 가집니다.
즉, 저장된 데이터들을 효과적으로 신속하게 탐색하고 변경사항들을 업데이트 하는 것 또한 속도 측면에서 빠르기 때문에 DOM 이 트리의 형태를 가진다고 할 수 있습니다.
DOM 이 화면에 렌더링 되는 과정
우선 html 를 트리화한 DOM 과 css 를 트리화한 CSSOM 을 합쳐 Render Tree 를 만들고 화면에 렌더링하기 위한 작업으로 tree의 각요소가 배치될 공간을 계산하는 Layout 작업을 한뒤에 화면에 보여지게 됩니다.(paint)
DOM이 변경& 업데이트 된다는 것은 브라우저의 페이지가 리렌더링된다는 것을 말하는데,
위의 사진에서 DOM 트리를 재구축하게 되고 다시 Layout,Paint 작업을 거쳐 화면에 보여지게 됩니다.
이는 DOM 트리의 일부의 사소한 부분이 변경된다 하더라도 변화가 없는 부분 까지 리렌더링이 되기 때문에 성능 저하 문제들이 자주 나타나곤 했습니다.
즉, JavaScript 에서 DOM 조작을 많이 할수록 이에 대한 리렌더링이 잦아지게 되고 따라서 성능저하 이슈가 생기게 됩니다.
Virtual DOM (가상 돔)
React 에서의 Virtual DOM은 컴포넌트의 상태,속성이 변경될 때마다 새로 생성되며, 상태와 속성이 변경되기 전에 생성된 가상의 DOM 과 상태,속성의 변경으로 새롭게 생성된 가상의 DOM 을 비교해 변경된 부분만 케치하여 실제 DOM에 반영합니다.
이렇게 해서 바뀐 부분만 렌더링작업을 하게 되는 것이다, 그럼 위에서 이야기 했던 성능 저하 이슈의 문제들을 해결 할 수 있게 된다.
Virtual DOM 은 Real DOM 의 복사본이라고 생각하면된다, 가상의 DOM 이기 때문에 실제의 DOM 객체 처럼 트리를 직접 변경하지는 않고, 실제 DOM 과의 변경된 부분을 비교하기 위해서 사용한다.
이때 이전의 가상 돔과 새롭게 생성된 가상 돔을 비교하는 과정에서 React는 Diffing 알고리즘을 사용해 변경된 부분을 감지한다.
React 는 상태,속성이 변경할때마다 가상의 돔을 생성해 이전의 가상 돔과 비교해 변경된 부분만 리렌더링한다고 했는데
이를 Reconcilication 재조정 이라고 하고,
만약 여러 개의 상태 변화가 있는 경우에는 일정 시간동안의 일어난 상태 변화를 한 번에 업데이트해주게 되는데
이를 Batch Update 배치 업데이트라고 한다.
사진 출처
코드스테이츠
