[프론트엔드] DOM & Virtual DOM

DOM DOM(Document Object Model, 문서 객체 모델)은 스크립트 언어로 HTML 요소를 제어할 수 있도록 웹 문서를 객체화 한 것이다. HTML이 작성되는 형식을 보면 위와 같은데, 이러한 구조를 표현하면 아래와 같이 나타낼 수 있다. 이를 나무 모양의 트리구조를 갖게 된다고 하여 DOM tree라고 하며, 각 요소를 노드라고 한다. 브라우저의 동작 과정 위의 브라우저 동작 과정 그림을 살펴보면 HTML 코드로 DOM 트리를 생성하고, 이에 스타일을 조합하고, 화면에 어떻게 배치할지 정리 및 렌더링하여 화면에 표시하게 된다. Virtual DOM SPA 방식과 같은 페이지에서 일부만 변경하게 되더라도 일련의 과정을 모두 거치게 되므로 많은 비용이 소모되는데, 이를 보완하기 위해 사용되..

2024.03.22