DOM 이란?
Document Object Model (문서객체모델)의 약자이다.
문서 객체는 Web Browser에서 HTML 문서에 JavaScript가 접근할 수 있도록 <html 태그>를 객체로 만든 것 이다.
프로그래밍 언어가 DOM 에게 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할을 한다.
기존의 렌더링 방식
- DOM tree 생성
→ Render엔진이 HTML문서를 파싱하고 어떤 내용을 페이지에 렌더링 할지 결정한다 - CSSOM tree 생성
→ Render엔진이 CSS 파일을 파싱해서 어떤 내용을 페이지에 렌더링 할지 결정한다. - DOM 트리 + CSSOM 트리 를 결합해서 Render tree생성
- Layout 생성 → 렌더트리로 각 노드의 위치와 크기를 계산한 Layout을 생성
- Paint → 실제 화면에 그리기
문제점
어떤 인터렉션에 의해 DOM에 변화가 발생하면 그 때마다 Render Tree가 재생성 된다.
즉, 모든 요소들의 스타일을 다시 계산하기 때문에 렌더링 할 양이 많으면 속도가 느려지게 된다.
가상돔(Virtual DOM)의 등장
- DOM의 구조를 흉내낸 JavaScript 객체이다.
- 메모리에 존재해서 실제 렌더 되지 않는다.
- 실제 DOM을 메모리에 복사해준 것
리액트가 가상돔을 반영하는 방법
볼펜으로 글을 쓰다가 잘못 써서 새로 작성해야 하는경우, 기존에는 처음부터 작성했어야 했지만, 수정테이프 처럼 고칠 부분만 고칠수 있게 해주는 것과 비슷하다.
- 데이터가 바뀌면 가상돔에 렌더링 한다.
- 이전 가상돔과 비교해서 바뀐 부분을 찾는다.(Diffing 과정)
- 바뀐 부분을 실제 DOM에 적용한다.(reconciliation 과정)
참고글
https://velog.io/@mollog/React에서의-가상돔-개념
https://devbirdfeet.tistory.com/219
반응형