[React] virtual DOM / 개념 / 이해 / 장점 알아보기!
real DOM vs virtual DOM
real DOM
브라우저에서 웹 페이지를 렌더링할 때 사용하는 트리 구조로, HTML 요소와 그 속성, 텍스트 등을 나타낸다.
실제 DOM을 조작하면 웹 페이지가 다시 그려지고 업데이트되는데, 이 과정이 비교적 비용이 크다.
Virtual DOM
React에서는 UI를 표현하는 가상의 DOM 트리를 생성한다.
이는 실제 DOM과 동일한 구조를 가지지만, 브라우저에 직접 적용되지 않고 메모리 상에 존재한다.
렌더링 과정
HTML을 파싱하여 DOM 객체를 생성하고, CSS를 파싱하여 스타일 규칙을 만듦
이 두개를 합쳐서 실제로 웹 브라우저에 보여져야할 요소를 표현한 "렌더 트리" 라는 것을 만듦
이 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠하는 등의 작업을 함.
virtual dom 작동 과정
UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링함. (실제 화면상 렌더링 되는 것이 아닌 비교를 위한 가상 렌더링)
현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산함.
변경된 부분을 실제 DOM에 반영함.
real DOM이 문제가 되는 경우
현대의 웹처럼 변경해야할 대상도 많고 변경도 많은 경우
정확히는 DOM을 변경하는게 문제가 아니고 렌더링을 여러번 하는게 문제
virtual DOM의 해결 방법
실질적인 방법은 Virtual DOM에 변경 내역을 한 번에 모으고(버퍼링)
실제 DOM과 변경된 Virtual DOM의 차이를 판단한 후,
구성요소의 변경이 부분만 찾아 변경하고 그에 따른 렌더링을 한 번만 하는 것으로 해결!!!
장점
실제 dom을 바꾸는 것 보다 효율적이다.
크로스 브라우징이 가능하다.
단점
메모리 사용량이 늘어난다.
오히려 간단한 ui에서는 비효율적이다.