1. 개요
React는 최적화를 위한 기능들을 내장하고 있다. 그중 하나가 VirtualDOM이다.
VirtualDOM은 무엇이고 어떻게 작동할까? 또 React는 왜 VirtualDOM을 사용할까?
이번 글에서는 VirtualDOM과 동작 방식에 대해 알아보자!
2. DOM이란?
화면이 렌더링될 때 아래의 순서로 렌더링된다.
- 서버로부터 html요소를 받아온다.
- html을 위에서부터 파싱하며 DOM트리 구조를 구성한다.
- css를 만난 경우 CSSOM트리 구조를 구성한다.
- DOM트리와 CSSOM트리를 결합해 Render트리를 생성한다.
- Reflow, Repaint과정을 거쳐 화면을 렌더링한다.
<head>, <body>같은 태그들은 Javascript가 직접 이용할 수 없기 때문에 객체로 변환되는데, 이것이 DOM(Document Object Model)이다.
그리고 Javascript를 통해 DOM의 요소를 조작(추가 / 변경 / 삭제)하는 방식으로 웹페이지가 동작한다.
3. DOM 조작에서 발생하는 문제
여기서 문제가 발생하는데, DOM트리를 수정하고, Reflow, Repaint과정은 리소스를 많이 요구하기 때문이다.
웹사이트가 복잡해질수록 빈번한 업데이트(DOM트리 수정)가 일어나고 이는 성능저하와 사용성 저하의 원인이된다.
이러한 문제를 해결하기 위해선 DOM트리 수정의 빈도를 최소화할 수 있는 전략이 필요한데, 이를 위해 도입된 방법이 바로 VirtualDOM을 이용하는 방법이다.
4. VirtualDOM의 동작 과정
VirtualDOM은 실제 DOM과 동일한 트리 구조를 메모리에 저장해 관리하는것을 말한다.
화면이 최초 렌더링되면 React는 DOM트리를 복사해 메모리에 저장한다.
이후 업데이트(state, props의 변경)이 일어날 때 변경사항이 적용된 VirtualDOM을 만들고, Diffing알고리즘을 이용해 기존의 VirtualDOM과의 차이점을 식별해낸다.
이후 Reconciliation알고리즘을 이용해 "변경된 부분만" 실제 DOM에 업데이트한다.
5. VirtualDOM의 장점
- 성능향상 : 메모리상에서 변경사항 처리 후 실제 DOM을 업데이트하기 때문에 실제 DOM의 조작을 최소화 한다. 이런 작업 덕분에 업데이트의 비용이 줄어든다.
- 유지보수성 향상 : 개발자가 DOM조작을 다룰 필요 없이 선언적 방식으로 UI를 작성할 수 있기 때문에 코드의 가독성과 유지보수성이 높아진다.
- Cross Platform 지원 : 이러한 동작은 메모리상에서 동작하기 때문에 React Native와 같은 모바일 플랫폼에서도 사용이 가능해진다.
6. VirtualDOM의 단점
- 메모리 사용량 증가 : 기존의 DOM외에도 VirtualDOM을 추가로 유지해야하기 때문에 메모리 사용량이 증가할 수 있다.
- 초기 로드시간 증가 : VirtualDOM을 만들고 처리하는 과정이 필요하기 때문에 초기 로드시간이 증가할 수 있다.
- 불필요할 수 있음 : 간단한 UI, 작은 규모의 서비스에서는 VirtualDOM을 이용하는것이 오히려 불필요한 오버헤드가 될 수 있다.
'프론트엔드' 카테고리의 다른 글
| [Javascript] var, let, const의 차이점 (0) | 2024.11.14 |
|---|---|
| [Javascript] 호이스팅(Hoisting)은 어떻게 동작하는걸까? (0) | 2024.11.13 |
| [Javascript] map()함수로 렌더링할 때 key값으로 index를 쓰면 안되는 이유 (0) | 2024.11.11 |
| [Typescript] 제네릭(Generic)에 대해 알아보자! (2) | 2024.11.09 |
| [React Native] ninja: error: rebuilding 'build.ninja': subcommand failed 오류 해결 (0) | 2024.11.08 |
