[React] Virtual DOM과 동작원리

1. Virtual DOM이란?

virtual DOM은 실제 DOM을 추상화한 자바스크립트 객체이다. 실제 DOM이 갖고있는 속성들(id, class, style, innerHTML 등)을 virtual DOM도 갖고 있다. 하지만 DOM API(getElementById, querySelector 등)는 갖고 있지 않기 때문에 실제 DOM보다는 가볍다.

2. Virtual DOM의 예시

let domNode = {
  tagName: 'div',
  attributes: {
    id: 'container',
    class: 'container',
    style: 'background-color: red;'
  },
  children: [
    {
      tagName: 'h1',
      attributes: {},
      children: ['Hello, Virtual DOM!']
    }
  ]
}

 

virtual DOM은 자바스크립트 객체라고 하였다. 위 코드는 virtual DOM을 약식으로 구현한 코드이다. 

virtual DOM은 메모리 상에서 동작하기 때문에 빠르게 연산 가능하고 실제 렌더링되지 않기 때문에 연산 비용이 적다.

 

3. Virtual DOM을 통해 Real DOM을 변경하는 방식

데이터가 변경되면, 가상 DOM의 UI가 변경되고, 실제 DOM과 비교하여 바뀐 부분만 적용한다.

왼쪽상단이 바뀌기 전의 가상돔, 왼쪽 하단이 바뀌고 난뒤의 가상돔이며, 이 둘을 비교하여 바뀐부분만 오른쪽의 실제 DOM에 반영한다.

• 비교 (Diffing) : virtual DOM이 업데이트 되면 업데이트 이전의 virtual DOM과 비교하여 정확히 어떤 virtual DOM Element가 변경되었는지 확인한다. 효율적인 알고리즘을 통해 변경된 지점을 빠르게 파악할 수 있다.
• 만일, 가상 DOM의 속성 값만 변했다면 그것만 업데이트한다. 
• 하지만 element 태그나 컴포넌트가 변경되었다면 해당 element를 삭제하고(unmount), 새로운 Virtual DOM element를 추가한다.
• 새로운 virtual DOM을 만들어 실제 DOM과 비교하여 바뀐 부분만 적용한다.
• Batch update: 10곳이 바뀌었다면 10번 렌더링하는 것이 아니라, 바뀐 부분을 한꺼번에 업데이트 한다.

4. Diffing (비교) 다음 단계가  Reconciliation (재조정) 단계일까?

 

여러 자료를 확인하면서 비교 단계와 재조정 개념을 살펴봤지만, 비교단계가 끝나고 재조정이 이뤄진다는 별개의 개념은 아니라는 결론을 내렷다. 그보다는 재조정이라는 용어는 비교를 통해 실제 DOM에 바뀐 부분을 적용하는, virtual DOM이 실제 DOM에 적용되는 전반적인 과정을 포괄하는 개념이라 보여진다. 

 

5. key Prop을 사용하는 이유

virtual DOM을 공부하다보면 자연스레 key Prop을 사용했을 때의 이점도 알게 된다. 요지는, 자식 엘리먼츠들을 key prop을 통해 구분해줌으로써, 자식 엘리먼츠 전체를 unmount하여 교체하는 것이 아니라, 변경이 생긴 자식 엘리먼츠만 변경사항을 반영하여 렌더링할 수 있다는 것이다.

• key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해줌으로서 렌더링 효율성을 높일 수 있다.
• 해당 key는 오로지 형제 사이에서만 유일하면 되고, 전역에서 유일할 필요는 없다.
• 배열의 인덱스를 key로 사용하면, 배열의 요소가 변경되어 인덱스도 변경될 경우 의도치 않은 방식으로 렌더링될 수 있다.

---

참고자료

[10분 테코톡] 🥁 지그의 Virtual DOM

별코딩 - React의 가상돔 (Virtual DOM)이 뭔가요? (짱 쉬움)

[React] 리액트 reconciliation(재조정) 이란? / 리액트 key [개발자 아저씨들 힘을모아:티스토리]

리액트 레거시 공식문서 '재조정'

[React] 리액트를 처음부터 배워보자. — 03. React 의 Update 스케줄링 과정