📖 DOM
🔍 dom이란?
- Document Object Model, 즉 문서 객체 모델이라는 뜼
- 트리 구조로 되어 있으며 바닐라 JS가 querySelector()등으로
각 element에 접근할 수 있도록 하는 객체 모델
- 트리 구조로 되어있어 이해하기는 쉽다
💬 Real dom의 장단점
- 트리가 거대해지면 속도 이슈 발생
- 또한 잦은 DOM 업데이트는 오류와 UI에 악영향을 미침
1. 변경점을 적용한 문서를 계속 리렌더링 해줘야하는데 트리가 거대하다면 그만큼 리소스 소모
- 예시 : 광고창 하나가 바뀌었다고해도 전체 페이지를 계속 갱신해야됨
💬 Virtual dom이란?
- 주로 SPA에서 (하나의 큰 HTML을 Real Dom으로 가지고 있는) 적용되는 개념
- 하나의 큰 HTML을 Real Dom으로 칭하고 해당 DOM을 컴포넌트 단위로 쪼개서 추상화한 개념
- Real Dom에서 직접 처리하는게 아니라 Virtual DOM이 버퍼 역할을 해줌으로써 어떤 부분이 바뀔 지 미리 계산, 수정 후에 해당 수정된 부분만 업데이트 해주기 위한 기술
💡 답변
버츄얼 돔과 리얼 돔의 차이를 설명해주세요
Real DOM은 element의 자식노드가 추가되면 전체 문서가 갱신되지만
Virtual DOM은 버퍼 역활을 해줌으로서 Real DOM을 추상화한 DOM과 비교하여
변경점만 Real DOM에 적용하여 전체 문서가 갱신되지 않습니다.
문법적인 차이도 조금 있는데 어떠한 element를 찾을때
document 즉 HTML 문서의 querySelector등으로 메소드로 찾는데
Virtual DOM을 사용하는 React의 경우는 ref로 element를 찾습니다.
