[기술면접] Virtual DOM?

Virtual DOM이 무엇인지 설명해주세요. Virtual DOM의 작동원리에 대해 설명해주세요.

 

결론 

DOM과 동일한 구조를 가지지만, 메모리상에 존재하는 자바스크립트 객체입니다. 

---

설명 

Virtual DOM이란 리액트의 UI를 구성하는 HTML 엘리먼트들을 메모리 내에 구현한 것입니다. 실제 DOM에 접근하여 조작하는 대신, 추상화된 자바스크립트로 객체를 구성하여 사용합니다. 리액트에서 데이터가 변하여 실제 DOM에 반영되기까지는 3가지의 과정을 거칩니다.

• 먼저 데이터를 업데이트하면 컴포넌트 UI전체를 Virtual DOM에 랜더링 합니다.
• 다음으로 이전의 Virtual DOM의 내용과 현재의 내용을 비교합니다.
• 바뀐 내용만 실제 DOM에 적용합니다.

DOM 전체를 다시 랜더링할 필요 없이 실제 DOM에 필요한 최소한만을 변경하여 효율성이 높다는 것이 큰 장점입니다. 

---

요약 

Virtual DOM이란 React에서 데이터 업데이트 시 UI의 갱신을 효율적으로 수행하기 위하여 실제 DOM의 구조를 띄며 메모리상에서 동작하는 객체입니다. 

---

 

참고

• 리액트를 다루는 기술
• https://velog.io/@bigsaigon333/Virtual-DOM