DOM 이란?
HTML 태그를 하나의 객체로 만든 것이다.
<P> ...</P> // p 객체
<div> ... </div> // div 객체
HTML 문서의 각 요소를 객체화하였으므로 HTML DOM(Document Object Model)객체, 줄여서 DOM이라 부른다.
브라우저 렌더링 과정
- DOM tree
브라우저는 위와 같이 HTML 태그의 포함 관계에 따라 DOM 객체들을 트리 구조로 만든다.
예를 들어 < html > 태그에 의해 생성된 html 객체는 head 와 body 두 자식을 갖는다.
또한 DOM 객체 각각은 DOM 노드 혹은 DOM 엘리먼트라고 부른다.
- Render tree
DOM에 CSS파일, inline 형식의 스타일을 더해 renter tree가 만들어진다.
- Layout
position이나 size등과 같은 노드들의 위치가 결정된다.
- Paint
실제로 화면에 그려지는 과정이다.
DOM의 변화가 발생하면? (REACT X)
render tree를 재생성하고, 다시 Layout, Paint 과정을 거치는 불필요한 과정을 반복해야만 한다.
React에서의 가상 DOM이란?
하지만 REACT에서는 메모리상에서 동작하는 가상 DOM을 이용해 이러한 불필요한 과정을 막을 수 있다.
가상 DOM이란, real DOM의 복사본, 추상화 버전과 같다.
그렇다면 가상DOM을 이용해 어떻게 렌더링을 최소화할 수 있는지 알아보자.
가상 DOM을 이용해 렌더링하는 과정
- 전체 가상 DOM 업데이트
- 가상 DOM을 업데이트 이전 시점과 비교
- 실제로 바뀐 부분만 real DOM에서 바꿈
- 스크린에 그려짐
가상DOM은 메모리상에서 동작하므로 실제 렌더링을 계속해서 반복하지 않아 연산비용을 최소화한다.
마치며 - 추천하고 싶은 영상
이해하기 쉽고 재밌게 설명되어 있어요!! 추천합니다
암냠냠