Virtual DOM 이란?
DOM은 뭐야?
- Document Object Model, 문서객체모델
- 브라우저에서 다룰 HTML 문서를 파싱하여 우리에게 시각화 해준다.
- 이 객체를 이용해서 HTML, XML 문서에 동적 처리를 해준다.
- ex.
getElementById
직접 DOM에 접근하는 것은 지양하자
: DOM이 직접 변경된다면 사소한 변경에도 전체가 재렌더링되기 때문에 과부하가 올 수 있다.
DOM의 문제점
- Web의 복잡도가 점차 증가했고 DOM 조작이 빈번하게 일어난다. DOM 조작은 브라우저 렌더링을 유발함. => 비효율적 => 해결하기 위해 Virtual DOM 탄생!
브라우저 렌더링? 간단하게 말해봐
- HTML을 파싱하여 DOM 트리 생성, CSS 파싱하여 스타일 규칙을 만든다.
- 이 둘을 합쳐 렌더트리를 만든다.
- 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠한다.
Virtual DOM 작동원리
- 하나의 가상 레이어로 적용하는 변경사항은 DOM에 바로 반영되지 않고 모아뒀다가 한번에 DOM에 전송한다.
- 그러면 DOM은 렌더링을 한번만 해도 됨
- But, DOM을 직접 조작하는 것보다 하나의 레이어를 거쳐가므로 속도가 느림.
- 실제로 DOM 조작은 드라마틱하게 많이 발생할 일이 없었고, Virtual DOM을 이용할 필요가 없었다.
React 탄생
- DOM에 변경사항을 조작해서 넣지 말고,
- 그냥 데이터가 바뀔 때마다 전부 다 다시 그려버리자
- 즉, 업데이트될 때 Virtual DOM 에 새로 그리고 이후 기존에 비해 변경된 부분만 DOM에 한번에 보내버리자
- 이렇게 탄생한게 React로 한방향 데이터 흐름을 가지면서 상태에 집중하기 때문에 선언적인 코드를 짤 수 있게 되었다.
React 장점
- Virtual DOM으로 UI를 빠르게 업데이트
- 컴포넌트 기반의 화면 구성 (재사용성)
- 오직 View에만 집중한 라이브러리 (MVC 프레임워크X)
버추얼 돔 꽤 자주 물어보더라고요