2023.05.25

참고

https://www.howdy-mj.me/dom/what-is-dom

<aside> 💡 "직접 DOM에 접근하는 것은 지양해야 한다.

</aside>

→ 이는 DOM에 직접 접근해도 문제가 되진 않지만, DOM이 직접 변경된다면 사소한 변경사항에도 전체가 재렌더링 되기 때문에 브라우저에 과부하가 올 수 있다. 따라서 최대한 DOM에 직접 접근하지 말아야 한다, 라고 이해하면 될 것 같다.

→ 지관: 가상돔이 돔의 변경사항을 한 번에 모아뒀다가 한 번에 리렌더링하고 돔은 변경할 때마다 바로바로 돔조작이 적은 경우에는 가상의 돔이 더 느리다 돔에 많이 접근하는게 아니라면 돔이 더 빠를 수 있다

DOM 조작이 많지 않다면 VirtualDOM을 사용하는 것이 오히려 더 느림

• Virtual DOM을 조작하고 -> DOM을 조작하는 것
• DOM을 조작하는 것

정리 : 돔조작이 적은 경우에는 직접 돔을 건들이는 것이 빠르고, 만약 많다면 가상의 돔을 사용하는 것이 더 빠르다.

<aside> 💡 Js = DOM, React = Virtual DOM

</aside>

DOM이란?

DOM (Document Object Model) : HTML, XML document와 상호작용하고 표현하는 API

문서 객체 모델 : 스크립트 언어로 html요소를 제어할 수 있도록 웹 문서를 객체화 한 것

HTML 문서에 동적인 처리를 해주고 싶을 때 사용하는 것이 DOM

• DOM tree

JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.