💡개념 및 용어 정리
- Virtual DOM(V DOM) - 가상 돔
- Real DOM(R DOM == DOM) - 실제 돔
- React의 화면 갱신 과정
- 렌더 단계 - 실제 DOM에 반영할 변경 사항을 파악하는 단계. 변경 사항을 파악하기 위해서 Virtual DOM을 이용한다.
- 커밋 단계 - Virtual DOM을 통해 파악한 변경 사항을 실제 DOM에 반영하는 과정
🌟 간단히 알아보는 브라우저 렌더링 과정
렌더링 과정
- HTML 문서를 파싱해서 DOM을 생성한다.
- CSS를 파싱해서 CSSOM을 생성한다.
- DOM과 CSSOM의 생성이 완료되면, 이들을 이용하여 실제 화면에 보일 요소들만 있는 Render Tree를 만든다.
- Render Tree에 있는 각 요소들의 위치와 크기를 계산한다. (Layout 단계)
- 각 요소를 화면의 픽셀로 반영한다.(Paint 단계)
- CSS의 z-index나 video 태그 등에 의해 요소들이 서로 다른 레이어에 그려질 수 있다. 따라서 각 레이어를 합치는 단계가 필요하다.(Composite 단계)
DOM을 변경하게 된다면
JS로 DOM을 변경하게되면 Render Tree를 다시 생성하고 Layout, Paint 단계가 다시 수행된다.
→ DOM 조작만으로도 많은 연산이 수행된다.
단, 브라우저도 렌더링 작업에 있어서 최적화가 되어있다. 아래는 브라우저는 어떻게 동작하는가? - Naver D2 아티클 중 브라우저의 동적 변경 부분을 발췌한 내용이다.
브라우저는 변경에 대해 가능한 한 최소한의 동작으로 반응하려고 노력한다. 그렇기 때문에 요소의 색깔이 바뀌면 해당 요소의 리페인팅만 발생한다. 요소의 위치가 바뀌면 요소와 자식 그리고 형제의 리페인팅과 재배치가 발생한다. DOM 노드를 추가하면 노드의 리페인팅과 재 배치가 발생한다. "html" 요소의 글꼴 크기를 변경하는 것과 같은 큰 변경은 캐시를 무효화하고 트리 전체의 배치와 리페인팅이 발생한다.
🤔1단계와 2단계는 순차적으로 진행되는 것이 아니라 동시에 진행된다?
→ 두 작업은 비동기로 수행된다.
→ 실험 결과 동시에 진행될 수 있다!!
🌟 Virtual DOM과 필요한 이유
- React는 화면에서 표현되는 각 요소를 트리로 구조화 한 후 메모리에 저장하는데, 이를 Virtual DOM이라고 한다. React는 이 Virtual DOM을 이용해서 Real DOM의 변경을 최소화한다.
- DOM을 변경하는 일은 비용이 많이 발생한다. 따라서 성능을 최적화 하기 위해서 DOM 변경하는 일을 최소화 하는 것이 중요하다.
🌟 Virtual DOM 역할
모든 변화를 한 번에 묶어서 처리할 수 있게 한다.
즉 데이터의 변화가 생겨 이를 화면에 반영할 때, 변경 사항을 하나씩 DOM에 반영하는 게 아니라 한 번에 DOM에 반영하게 한다. 이렇게 되면 한번 DOM을 업데이트 할 때 렌더링 연산이 많지만, 렌더링 연산을 여러 번 수행하는 것보다는 비용이 저렴하다.
→ DOM Fragment를 이용하면 이런 효과를 낼 수 있다.
변경 사항 관리가 간단해진다.
Virtual DOM 방식을 이용하면 변경되는 부분을 찾는 과정이 자동화된다. 개발자는 데이터 변경에 따라 화면에 변경되는 부분과 그대로 유지되는 부분을 신경쓰지 않아도 된다. 즉 데이터 변경 시 변경되는 부분과 그대로 유지되는 부분을 관리하기 편해진다.
🌟 React Element로 알아보는 Virtual DOM 구조
- Virtual DOM은 실제 DOM에 올라갈 수 있는 상태이다.
- React Element의 트리구조이다.
- 모든 React Element의 type이 문자열(=html 태그)일 때 실제 DOM에 반영될 수 있다. 즉, type이 함수(=리액트 컴포넌트)인 Element가 있다면 해당 컴포넌트 함수를 실행 시켜, type을 html 태그로 변화시킨 후 실제 DOM에 반영한다.
const elementTree = {type: 'div',props: {children: [{type: f() Title {...},props: { children: '이것은 제목 입니다.' },...},{type: 'p',props: { children: '부제목 입니다.' },...}]},...}
참고 자료
실전 리액트 프로그래밍 리액트 훅부터 Next.js까지(3.2 리액트 요소와 가상 돔) - 이재승
[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? - velopert
Virtual DOM - sbinha