오늘 면접을 보면서 'Virtual DOM은 무엇인가'에 대한 질문을 받았다. 대답의 어려움을 느꼈고, DOM에 대한 지식이 부족하다는 생각이 들어 정리해 보려고 한다.
DOM
DOM(Document Object Model)은 HTML과 연관있다.
이름에서 나오는 Document가 HTML을 뜻한다. 그래서 DOM은 쉽게 HTML을 Object자료형으로 모델링 했다는 것을 뜻한다.
HTML를 JavaScript가 이해할 수 있는 객체라는 모델로 만드는 것이다.
DOM은 브라우저에 내장되어 있는 API
기본적으로 내장되어있어서 별도의 작업 없이 JS와 HTML이 서로 소통하는 창구를 만들어 주는 DOM을 사용할 수 있다.
! JS이외에 다른 프로그래밍언어로도 DOM을 구현할 수 있다.
초창기에는 JS와 DOM이 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전했기 때문이다.
추가적으로 브라우저는 CSS도 CSSOM이란 API를 이용해 JS가 이해할수 있는 객체로 바꿔준다.
DOM은 다음과 같은 렌더링과정이 필요하다
- DOM tree 생성
- CSSOM tree 생성
- Render tree가 브라우저에 그려짐
브라우저에 변화(좋아요를 누른다던지)할때마다 위의 과정을 다시 거친다. 그러면 DOM이 조작 될때마다 사용자는 화면이 깜빡 거리면서 리렌더링 과정을 겪게된다.
Virtual DOM
Virtual DOM은 이름처럼 DOM의 구조만 간결히 흉내낸 자바스크립트 객체이다.
StackOverflow의 What is Virtual DOM?이란 글의 답변 중 아래와 같은 내용이 있다.
You can think of the virtual DOM like a blueprint. It contains all the details needed to construct the DOM, but because it doesn't require all the heavyweight parts that go into a real DOM, it can be created and changed much more easily.
Virtual DOM은 청사진이다. DOM을 구성하는데 필요한 모든 세부사항이 들어있다. 하지만 실제 DOM에 들어가는 모든 무거운 부분들은 필요로 하지 않기 때문에 더 쉽게 생성되고 바뀔 수 있다.
React 공식 홈페이지에서는 이러한 과정을 재조정이라고 표현한다.
!재조정을 읽다보면 React에서 Map을 사용할때 왜 key가 필요한지 key에 왜 index를 사용하면 안되는지도 이해할 수 있다.
개발자가 key를 통해서 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경이 되지 않아야 할지 알려주는 것이다.
만약 index를 넣는다면, 자식 엘리먼트들이 재배열되는 순간 비효율적으로 작동한다.
Virtual DOM의 과정은 다음과 같다.
1. 데이터에 변화가 생기면, 전체 UI를 Virtual DOM에 리렌더링 한다.
2. 이전 VIrtual DOM에 있던 내용과 현재의 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용이 된다.
시청각적인 설명은 이영상을 참고하자.
참고자료
얄코 - DOM은 뭐고 가상 DOM은 뭔가요?
김버그 - DOM이 뭐죠
MDN - DOM
sbinha.log - Virtual DOM
