"Virtual DOM이 무엇인지 설명해주세요"
"Virtual DOM 작동 원리에 대해 설명해주세요"
오늘은 프론트엔드 기술면접 단골 질문인 가상돔(Virtual DOM)에 대해 알아보자.
DOM이란?
DOM(Document Object Model)이란 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다.
DOM은 HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되었다. DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단이었다.
잘 구조화된 문서는 DOM을 사용하여 아래와 같이 트리 구조를 얻어낼 수 있다.
DOM tree안에는 각각의 element에 상응하는 Node가 들어있는데요. 개발자들은 DOM이 제공하는 API를 통해 DOM구조에 접근을 하고, 원하는 Element를 입맛대로 조작할 수 있습니다. 이를 DOM 조작이라고 하죠.
Virtual DOM이란?
Virtual DOM은 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하시면 쉽습니다. 복사본은 실제 DOM이 아닌 JS 객체형태로 메모리 안에 저장되어 있습니다.
Virtual DOM을 사용하는 이유
Vanilla JS를 이용하여 DOM을 조작하는 방식은 무거운 작동방식이다. 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문이다. 그래서 React는 깜박거림 없이 부드러운 UX를 사용자에게 제공하기 위해 변경사항만 빠르게 파악하고 리렌더링 하기 위해 가상 DOM을 만들어 비교하는 방식을 채택했다.
Virtual DOM 작동 원리
위에서 리액트는 실제 DOM의 UI를 가진 JavaScript 객체를 메모리상에 가지고 있다고 했다. 이것이 바로 Virtual DOM 인데, 리액트는 항상 두 개의 Virtual DOM 객체를 가지고 있다.
- 렌더링 이전 UI(화면 구조)를 나타내는 Virtual DOM
- 렌더링 이후에 보이게 될 UI를 나타내는 Virtual DOM
리액트는 State가 변경될 때마다 Re-Rendering이 발생하는데, 재조정(Reconciliation) 과정을 통해 Virtual DOM과 실제 DOM을 동기화 한다.
재조정(Reconciliation) 과정은 다음과 같다.
- 리액트는 UI 변경을 감지하면(state가 변경될 떄) UI를 Virtual DOM으로 렌더링한다.
- 실제 화면 상에 렌더링되는 것이 아니라 비교를 위한 가상 렌더링이다.
- 현재 Virtual DOM과 이전의 Virtual DOM을 비교해, 어떤 element가 변했는지 계산한다.
- 이때 Diffing 알고리즘을 이용한다.
- 변경된 부분을 실제 DOM에 반영한다.
그 외:
만약에 면접 중에 화이트보드를 사용할 수 있으면 Virtual DOM 원리를 설명할 때 사용해보자. 그림으로 설명하기 좋은 개념이다.
