Virtual DOM 이란?

• DOM을 추상화한 가상의 객체

DOM은 뭐야?

• Document Object Model, 문서객체모델
• 브라우저에서 다룰 HTML 문서를 파싱하여 우리에게 시각화 해준다.
• 이 객체를 이용해서 HTML, XML 문서에 동적 처리를 해준다.
• ex. getElementById
• 직접 DOM에 접근하는 것은 지양하자 : DOM이 직접 변경된다면 사소한 변경에도 전체가 재렌더링되기 때문에 과부하가 올 수 있다.

DOM의 문제점

• Web의 복잡도가 점차 증가했고 DOM 조작이 빈번하게 일어난다. DOM 조작은 브라우저 렌더링을 유발함. => 비효율적 => 해결하기 위해 Virtual DOM 탄생!

브라우저 렌더링? 간단하게 말해봐

1. HTML을 파싱하여 DOM 트리 생성, CSS 파싱하여 스타일 규칙을 만든다.
2. 이 둘을 합쳐 렌더트리를 만든다.
3. 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠한다.

Virtual DOM 작동원리

• 하나의 가상 레이어로 적용하는 변경사항은 DOM에 바로 반영되지 않고 모아뒀다가 한번에 DOM에 전송한다.
• 그러면 DOM은 렌더링을 한번만 해도 됨
• But, DOM을 직접 조작하는 것보다 하나의 레이어를 거쳐가므로 속도가 느림.
• 실제로 DOM 조작은 드라마틱하게 많이 발생할 일이 없었고, Virtual DOM을 이용할 필요가 없었다.

React 탄생

• DOM에 변경사항을 조작해서 넣지 말고,
• 그냥 데이터가 바뀔 때마다 전부 다 다시 그려버리자
• 즉, 업데이트될 때 Virtual DOM 에 새로 그리고 이후 기존에 비해 변경된 부분만 DOM에 한번에 보내버리자
• 이렇게 탄생한게 React로 한방향 데이터 흐름을 가지면서 상태에 집중하기 때문에 선언적인 코드를 짤 수 있게 되었다.

React 장점

1. Virtual DOM으로 UI를 빠르게 업데이트
2. 컴포넌트 기반의 화면 구성 (재사용성)
3. 오직 View에만 집중한 라이브러리 (MVC 프레임워크X)