Virtual DOM이란?

React의 공식 문서에서 Virtual DOM은 다음과 같이 정의된다.

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.

Virtual DOM은 말 그대로 가상의 돔을 의미한다.

여기서 돔(DOM)이란 무엇일까? 돔은 Document Object Model의 줄임말로 HTML의 요소(element)를 논리적으로 표현한 것이다. 아래는 MDN의 인용이다.

DOM은 논리적 트리가 있는 문서를 나타냅니다. 트리의 각 분기는 노드로 끝나고 각 노드에는 객체가 들어 있습니다. DOM 메서드는 트리에 대한 프로그래밍 방식 액세스를 허용합니다. 이를 통해 문서의 구조, 스타일 또는 콘텐츠를 변경할 수 있습니다.

돔에는 JS에서 사용하는 메서드를 통해(getElementById, querySelector...) 이용하여 각 요소를 나타내는 Node 단위에 접근하여 데이터를 조작할 수 있다. 이렇듯 직접 DOM tree 구조를 조작할 수 있는데 왜 가상 돔의 개념이 나온 것일까?

가상 돔을 왜 써요?

어느 순간부터 궁금증이 생겼다. JS에서 사용하는 DOM 요소 조작 메서드를 react로 넘어와서는 사용하지 않게 됐다. 근데 왜 사용을 하지 않을까?

그 이유는 위에서 언급했듯이 가상 돔을 활용한 프로그래밍이 더 효율적이기 때문이다.

위 이미지는 가상 돔의 동작을 그림으로 표현한 것이다. 효율적인 관리를 위해 react는 state가 변경될 때를 기점으로 리렌더링이 발생하고, 이 시점에 실제 브라우저가 그려지기 전에 가상 돔을 생성한다. 생성된 가상 돔끼리의 비교를 통해 차이가 발생한 부분을 diffing 알고리즘을 이용하여 분석하고 변화된 부분만 실제 DOM에 적용하게 된다. 이를 재조정(Reconciliation)이라고 한다.

만약 가상 돔을 사용하지 않고 실제 돔을 계속 조작하면, 변경된 값을 찾아내는 것이 어렵고 특정 값이 변경될 때마다 화면을 다시 그리는 일이 발생하게 된다. 이런 현상이 계속되면 상대적으로 비효율적이고 데이터를 세분화 하여 관리하는 것도 어려움이 있다.

📢 추가 정보

재조정 과정에서 리스트의 각 항목이 변경되었는지 판단하려면 각 항목을 고유하게 식별하는 값인 key 를 사용해야한다. 아래와 같이 id 등을 설정하여 식별한다. key를 사용하지 않으면 온전한 식별이 불가능해서 불필요한 렌더링이 발생할 수 있다.

const users = [
  { id: 1, name: "jihoon1" },
  { id: 2, name: "jihoon2" },
  { id: 3, name: "jihoon3" }
]; 

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

React에서 실제 DOM을 조작하면?

react에서 실제 DOM을 조작하는 getElementById, querySelector를 사용할 수 있을까? 가능은 하다.

그렇게 되면 당연하게 가상 돔의 diff sync가 맞지 않아서 문제가 발생하기 쉽다. 마치 state를 변경할 때 setter를 사용하지 않고 변수 저장값을 직접 건드려서 props 전달 과정에서 원치 않은 결과가 나오는 현상과 비슷한...?

따라서 직접 DOM을 조작하는 행위는 권장되지 않고, useRef hook을 이용해서 DOM 요소에 접근하는 것이 좋다. 하지만 웬만해선 DOM 요소를 건드리는 것이 그닥 선호되는 방식은 아니기에 정말 필요한 상황이 아니라면 사용하지 않는 것이 좋아보인다.

✍️ Summary
가상 돔을 사용하는 것은 불필요한 DOM 조작을 최소화 할 수 있고, 일괄 업데이트(Batch Update)를 통한 성능 최적화가 가능하며 직관적인 코드로 유지 보수가 용이해진다는 이점이 있다.


(멘토님 피드백!) 만약 면접에서 물어보면 이렇게 답하자.

Q: 가상 돔을 왜 사용하는가?
A: 가상 돔에서 변화한 부분을 내가 원하는 시점에 실제 돔에 한꺼번에 업데이트 할 수 있다. 따라서 실제 돔을 조작하면 브라우저 입장에선 화면을 다시 그리지만, 가상 돔에선 변경 시점을 조절할 수 있다는 것!

img ref: https://www.skillreactor.io/learn/html-and-javascript/2.1-what-is-dom
https://dev-cini.tistory.com/11