Vue virtualDOM2 [Vue.js] Vue의 가상 DOM과 외부 라이브러리 (feat. 계속 다시 그려지는 차트...) 1. 계기KendoUI라는 라이브러리의 차트를 사용하다가 한 이슈가 발생했다. 같은 페이지에 있는 input에 값을 입력할 때마다 차트가 계속 새로 생성되는 문제였다. 단순해 보이는 문제였지만, Vue의 가상 DOM과 외부 라이브러리의 상호작용을 이해하는 좋은 기회가 되었다. 2. 문제 상황 이런 구조에서 input에 텍스트를 입력할 때마다, 차트의 SVG 요소가 완전히 삭제되고 새로운 SVG가 처음부터 다시 생성되어, 차트가 깜빡이는 현상이 발생했다. 3. 발생 원인1) Vue의 가상 DOM 동작 방식Vue2는 React와 마찬가지로 가상 DOM을 사용하여 효율적으로 화면을 렌더링 한다. 가상 DOM은 실제 DOM을 추상화한 것으로, 업데이트가 발.. 2025. 11. 30. [Vue.js] Vue에서의 Virtual DOM DOM DOM이란 Document Object Model이라는 뜻으로 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. HTML 파일을 받으면 문자열을 파싱해서 DOM 트리로 만든다. 이 DOM 트리와 CSS로 만든 CSSOM 트리를 결합하여 Render 트리를 만들고 레이아웃과 페인팅 작업을 하면 비로소 우리의 화면이 우리의 눈에 보이게 된다. Virtual DOM JavaScript의 경우, DOM을 조작할 때마다 트리를 수정하여 레이아웃을 다시 그리고 리페인팅을 해야 한다. 이 과정이 반복되게 되면 비용이 커지게 되고 충분히 무거워질 수 있는 작업이 된다. 이때 등장한 것이 바로 Virtual DOM이다. Virtu.. 2023. 5. 24. 이전 1 다음
