[Front] Virtual DOM

실제 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓고 DOM과 비교하며 일치시키는 과정으로 실제 DOM과 동기화하는 프로그래밍 개념

 

DOM과 유사한 역할을 하고 변경 사항을 DOM에 직접 수정하는 것이 아니라 Virtual DOM을 생성, 수정하고 Virtual DOM을 사용해 DOM을 수정하게 한다.

 

특징

• render함수가 return하는 것은 새로운 Virtual DOM을 만들기 위한 재료이다.
• DOM트리를 복제한 JS 객체이다.
  
  • class, style 같은 속성은 있지만
  • DOM api는 없다.
  • 그렇기에 가볍다
• DOM 조작시에 비용이 많이드는 것은 렌더링을 하는 것이다.
  
  • 하지만 Virtual DOM은 렌더링을 하지않고 메모리 상에서만 트리를 변경하는 것이기 때문에 효율적이다.

 

기존의 DOM 조작의 비효율성

 

• DOM을 조작할 때 마다 처음부터 DOM트리를 구성하고 페인팅 작업까지를 다시 진행을 한다.
  
  • 수 많은 연산을 통해 비용이 많이 드는 작업이고 성능을 저하한다
• Virtual DOM은 그 작업을 미리 최적화시켜준다
• 컴포넌트 단위로 묶어서 관리할 수 있게 해준다.

 

동작

 

• 실질적으로 Virtual DOM에 변경 내용을 한번에 모으고 실제 DOM과 Virtual DOM의 차이를 비교하고 변경된 부분만 찾아 변경을 하는 식으로 한번만 렌더링이 되게 함

 

장점

• Virtual DOM을 사용하여 브라우저 내에서 발생하는 렌더링을 줄여 성능을 개선할 수 있다.
  
  • DOM에 변화가 생기면 (ex) 오타수정, 이미지 첨부 등) 처음부터 다시 파싱을하고 렌더트리를 재생성하고 모든 요소들의 스타일이 다시 계산되고 레이아웃과 페인팅하는 작업을 새로한다.