[리액트] Virtual DOM이란? (브라우저 동작 원리)

⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술과 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

포스팅에 해당하는 목차는 다음과 같습니다:

리액트를 다루는 기술: 1장 리액트 시작

• 1.1 왜 리액트인가?
• 1.2 리액트의 특징
• 1.3 작업 환경 설정

리액트 기초반

• 2-1 라이프 사이클이란?

 

---

 

❗️이 포스팅은 DOM의 개념을 설명하지 않습니다. DOM을 모르시는 분은 DOM을 먼저 공부하세요❗️

 

1. Virtual DOM의 필요성

규모가 큰 웹 애플리케이션은 브라우저에서 DOM의 변화가 일어났을때 처리하는 과정이 느리다. Virtual DOM이 필요한 이유는 바로 여기에 있다. 여기서 잠깐, 왜 일반 DOM은 처리하는 속도가 더 느릴까? 그 이유는 웹브라우저가 DOM을  읽고 출력하는 과정에 있다. 브라우저가 어떻게 렌더링이 되는지 먼저 공부해보자.

 

2. 브라우저 동작 원리

웹브라우저의 동작원리를 설명해주는 다이어그램

사용자가 웹사이트에 접속하면 브라우저가 서버에 웹사이트를 불러오는 요청을 한다. 브라우저가 서버에서 웹사이트 파일을 받은 후 화면에 구현해준다.

 

2.1 아래는 브라우저가 웹사이트를 화면에 구현하는 과정, 즉 브라우저 렌더링 순서다.

1. 사용자가 웹사이트에 접속
2. 브라우저가 서버에서 소스 코드를 불러온다
3. 브라우저는 HTML 코드를 분석한 후 DOM Tree를 출력한다
4. 브라우저는 CSS 코드를 분석한 후 CSSOM Tree를 출력한다
5. DOM Tree와 CSSOM Tree를 합친 후 Render Tree를 출력한다
6. 브라우저가 Render Tree코드를 기반으로 웹사이트를 구현한다 (레이아웃을 만들고, 스타일을 입힌다)

 

할일을 기입하는 웹애플리케이션이 있다고 가정해보자. 사용자가 Input에 할일을 기입하고 추가 버튼을 누르면 할일 목록이 생성된다. 추가버튼을 누르는 순간 브라우저는 DOM Tree와 CSSOM Tree를 다시 만드는 과정부터 시작한다. 이 과정에서 속도가 느려지는 것이다. 웹애플리케이션에서 동적으로 작동을 하면 브라우저는 브라우저 렌더링 과정을 다시 거쳐야한다. 

 

3. Virtual DOM

일반 DOM을 사용하는 웹애플리케이션은 직접 DOM에 접근하여 변화를 주었기 때문에 속도가 느려지는 단점이 있었다. Virtual DOM을 사용하면 이와같은 문제를 해결할 수 있는데 Virtual DOM은 변경사항이 생기면 DOM에 직접 접근하여 변화를 주는것이 아닌 먼저 Virtual DOM을 수정하고 이전의 Virtual DOM과 비교해서 차이점만을 반영하여 DOM을 업데이트하기 때문이다. 여기서 Virtual DOM은 가상의 돔으로 메모리에 있는 DOM을 추상화한 가상의 자바스크립트 객체를 말한다. DOM의 복사본이라고 생각하면 편하다.

 

리액트는 DOM 처리횟수를 최소화하고 효율적으로 진행하기 위해 Virtual DOM을 사용한다.

 

3.1 리액트에서 데이터가 변할때는 다음과 같은 과정을 거친다.

1. 리액트에서 데이터가 업데이트된다
2. Virtual DOM을 메모리에 생성한다
3. 이전 Virtual DOM에 있던 내용과 현재 Virtual DOM을 비교하여 차이점을 파악한다
4. 그 차이점을 모아 실제 DOM에 전달한다

 

4. 주의점

Virtual DOM을 사용하는것이 일반 DOM을 사용하는 것보다 무조건 빠르다는 말은 아니다. 작은 규모의 웹사이트는 일반 DOM을 사용하는 것이 오히려 더 빠를 수도 있고 일반 DOM을 사용하더라도 최적화를 잘해주면 성능상 문제가 없을수도 있다. 

 

5. 간단 정리

가상돔이란

메모리 상에서 돌아가는 DOM의 복사본.

가상돔이 필요한 이유

DOM이 수정될때마다 모든 DOM에서 수정할 걸 찾고, 수정을 한다면 필요없는 연산이 많이 일어나게 된다.

가상돔의 동작 방식

기존 DOM과 데이터가 변한 후 가상 DOM을 비교해서 바뀐 부분만 진짜 DOM에 갈아끼워준다.