목차

• Virtual DOM이란
• Virtual DOM을 사용하는 이유
• Virtual DOM의 잘못된 이해

Virtual DOM이란

Virtual Dom을 알아보기 이전에 Dom에 대해 알아보겠습니다.
마침 제 블로그에 Dom에 대해 작성한 글이 있어 이곳에서 확인하면 해보시면 좋겠습니다.
Dom이란 ←

Virtual DOM이란

• DOM을 추상화한 JavaScript 표현이라고 할 수 있으며 주로 React, Vue.js 사용됩니다.

• Virtual DOM은 실제로 스크린에 랜더링하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 상대적으로 빠릅니다.

• Virtual DOM은 실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념입니다.

Virtual DOM을 사용하는 이유

• 데이터의 변화에 따라 DOM을 직접적으로 변화한다면 성능적인 문제가 발생합니다.

• DOM이 느리다고 하는 이유는 DOM자체가 느린게 아니라 웹 브라우저단에서 DOM에 변화가 일어나면 웹브라우저는 CSS, Layout, paint 모든부분을 다시 렌더링 합니다.

• Virtual DOM을 사용하여 DOM 업데이트를 추상화함으로서 DOM처리 횟수를 최소화 하고 효율적으로 진행할 수 있습니다.

• 리액트에서 DOM을 업데이트 하는 절차

  • 1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 합니다.
  • 2. 이전 Virtual DOM에 있는 내용과 현재 내용을 비교합니다.
  • 3. 바뀐부분만 실제 DOM에 적용합니다.

Virtual DOM의 잘못된 이해

• Virtaul DOM을 사용하는것이 무조건 빠른것은 아닙니다.

• Virtual DOM은 위에서 말했지만 이전DOM과 현재 DOM을 비교해서 바뀐 부분만 수정하는 절차입니다. 즉 바뀐부분이 없다면(간단한 경우) 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 합니다.