[React] DOM(돔)이란? Virtual DOM(가상 돔)이란?

 

🔗 DOM(돔)이란?

 

 'Document Object Model'. HTML, XML 문서의 프로그래밍 인터페이스이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법(API)을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

 

 

🔗 DOM에 직접 접근할 때의 문제점

 

 DOM에 직접 접근할 경우 뷰에 변화가 있으면 다시 DOM을 변경해야 하기 때문에 브라우저의 잦은 렌더링을 유발하여 효율성이 떨어지게 된다.

 

 

🔗 Virtual DOM(가상 돔)이란?

 

 가상 DOM은 실제 DOM의 변화를 최소화 시켜주는 역할을 한다. 뷰에 변화가 있으면, 그 변화가 실제 DOM에 적용되기 전에 가상 DOM에 적용시켜 최종 결과만 실제 DOM에 전달한다. 예를 들어 뷰에 20개의 변화가 있으면 가상 DOM에 모아두었다가 한 번에 실제 DOM에 전달한다. 따라서 실제 DOM에서는 1개의 변화로 인식하기 때문에 한 번의 렌더링을 거치면 되므로 효율성이 높아진다.

 

 

---

🔎 참고 자료

• DOM 소개
• IT 기술 면접 예상 문제

💡 같이 보면 좋을 Post

[HTTP] 브라우저 렌더링 과정