[React] Virtual DOM

코드잇 스프린트 4기

6주 차 위클리 페이퍼

 

Virtual DOM

브라우저가 HTML을 렌더링 하는 과정은 다음과 같다.

 

1. HTML을 통해 DOM 트리를 생성한다.

2. CSS를 통해 CSSOM 트리를 생성한다.

3. DOM 트리와 CSS 트리로 렌더 트리를 생성한다.

4. 레이아웃을 계산한다.

5. 픽셀로 변환하여 화면을 그린다.

 

우리가 JS나 CSS로 DOM이나 CSS에 변화를 주면 위 과정을 반복한다.

웹 페이지의 요구사항이 복잡해지면서 DOM이나 CSS에 변화를 주는 작업이 빈번해졌다. 그 결과 성능을 많이 잡아먹는 문제가 생겼다.

 

그 해결책으로 DOM에 직접 요청을 하는 것이 아니라 가상돔(Virtual DOM)을 만들어 메모리에서 관리하여 변화가 있을 때 구 가상돔과 새 가상돔을 비교하여 변경된 내용만 DOM에 적용하여 렌더링 과정을 줄여 성능을 개선할 수 있다.

---

참고 자료

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/#_1-%E1%84%80%E1%85%A1%E1%84%89%E1%85%A1%E1%86%BC%E1%84%83%E1%85%A9%E1%86%B7-virtualdom-%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5

 

감사합니다.