[React] VirtualDOM

👑 Virtual DOM이란?

실제 DOM과 비슷한 구조를 가진 리액트 객체의 트리
직접 DOM을 수정하지 않고도 DOM을 제어할 수 있도록 해준다.

직접 DOM을 수정하지 않고 관리하는 것이 왜 필요할까?

💎 virtual DOM을 통한 렌더링 및 DOM 업데이트 과정

1. A JSX element renders.
   JSX요소 렌더링

2. The entire virtual DOM gets updated.
   Virtual DOM 업데이트

3. The virtual DOM is compared to what it looked like before it updated to figure out which objects have changed.
   Virtual DOM이 변경된 부분만 비교해 업데이트

4. The changed objects, and the changed objects only, get updated on the real DOM.
   변경된 객체만 실제 DOM에 업데이트

5. Changes on the real DOM cause the screen to change.
   변경된 실제 DOM을 화면에 표기

💎 DOM과 virtual DOM과의 차이점

• virtual DOM은 HTML에 직접적으로 영향을 줄 수 없다.
• virtual DOM은 어떤 JSX요소이든지 렌더링되면 업데이트 된다.
• virtual DOM은 일반DOM보다 빠르게 업데이트할 수 있다.
  - 어떤 객체가 변경되었는지 즉각적으로 파악해 효율적이다.

👑 Virtual DOM은 왜 필요할까?

💎 1. DOM 조작 과정에서의 실수를 줄이기 위함

점접 더 웹이 발전하며 복잡해지면서, DOM 역시도 복잡해졌는데, 이 DOM요소 하나하나를 직접 추가/삭제하며 관리하고 조작하게 되면 실수가 발생할 여지가 많다.
virtual DOM은 필요한 부분만 자동적으로 실제 DOM에 자신을 비교한 뒤 변경부분만 업데이트하기 때문에, 이러한 과정을 자동화하고 실수를 줄인다.

💎 2. 리렌더링 연산 최소화

리액트는 virtual DOM을 통해 DOM의 업데이트를 batch 처리한다.

batch 처리?

한 마디로 필요한 연산을 모아 한번에 처리한다는 것이다.

👑 virtual DOM을 통한 리렌더링 과정

리렌더링 과정을 조금 더 자세하게 살펴보면, 다음과 같이 정리할 수 있다.

1. virtual DOM트리를 메모리에 새로 생성
2. 이전 virtualDOM트리와 새로 생성한 virtual DOM트리를 O(n)의 휴리스틱 알고리즘으로 비교하여 차이점을 파악
3. 차이점들을 하나로 모은 후, 실제 DOM에 전달하여 반영

virtual DOM을 왜 매번 새로 생성해 비교하는 걸까?

state를 하나하나 추적해 어떤 부분이 변경되었는지를 찾는다고 생각해보자.
state와 DOM이 많아져 복잡해질 수록 이러한 과정은 비효율적이다.
아예 Virtual DOM을 새로생성해 어떤 부분이 변경되었는지 비교하는 것이 효율적이다.

(이 부분에 대해서 아직 정확히 이해하지는 못했다. 지금은 효율성을 위한 것이라고 이해하고 일단 넘어가자.
virtual DOM에 대한 큰 그림을 그리는 것이 이번 포스팅의 목적이다.)

위에서 DOM트리를 O(n)의 휴리스틱 알고리즘으로 비교한다고 했다. 이건 무슨말일까?

💎 Reconcilation

재조정 이라는 뜻으로, 공식문서에서 리액트가 변경된 부분을 비교해 변경된 부분을 업데이트하는 것을 표현할 때 사용한 단어이다.

리액트의 Reconcilation은 diff 알고리즘을 사용해 이루어진다.

diff 알고리즘?

diff 알고리즘

노드를 다른 노드와 비교하고, 변경되었는지 확인하는 비교 알고리즘
전체 DOM 트리를 탐색하고 비교하려면 복잡도는 O(n^3)이 된다.
이 알고리즘을 적용한다면 O(n) 복잡도로 비교 연산을 수행할 수 있다.

다음과 같은 흐름으로 노드를 비교한다.

1. 속성 (attributes)의 수가 다른지
2. 하나 이상의 속성이 수정되었는지
3. 노드에 자식요소가 없고 textCOntent가 다른지

이 알고리즘은 다음을 전제로 한다.

1. 같은 엘리먼트끼리 비교하고, 다른 엘리먼트는 비교하지 않는다. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
2. key가 지정되어 있으면 key가 같은 노드끼리 비교한다. key prop을 이용하면 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해줄 수 있다.

조금 더 자세하게 살펴보자.

리액트는 두 개의 트리를 비교할 때 각 트리의 루트 엘리먼트부터 비교한다.
이후에는 루트 엘리먼트의 타입에 따라 다음과 같은 방식으로 비교한다.

1. 같은 레벨의 노드끼리 비교

2. 같은 위치에서 엘리먼트의 타입이 다른 경우 (div태그가 span태그로 바뀐 경우)

• 기존 트리 제거
  - 기존 트리 내부의 엘리먼트/컴포넌트 모두 제거
• 새 트리 생성
  - 새 트리 내부의 엘리먼트/ 컴포넌트 모두 새로 생성

3. 같은 위치에서 엘리먼트가 DOM을 표현하고, 그 타입이 같은 경우 (클래스 변경)

• 엘리먼트의 attributes 비교
• 변경된 attributes 만 업데이트
• 자식 엘리먼트들에 diff 알고리즘을 재귀적으로 적용

4. 같은 위치에서 엘리먼트가 컴포넌트이고, 타입이 같은 경우 (<Item price=100 /> -> <Item price=200 />)

• 컴포넌트의 인스턴스 / state는 유지한다.
• 컴포넌트 인스턴스의 업데이트 전 라이프 사이클 메서드들이 호출되며 props가 업데이트된다.
• render()를 호출하고, 컴포넌트의 이전 엘리먼트 트리와 다음 엘리먼트 트리에 대해 diff 알고리즘을 재귀적으로 적용한다.

5. 자식노드에 대한 재귀적 처리

DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있을 때 변경을 진행한다. 이때 비교는 첫 자식요소에서 마지막 자식요소대로 순서대로 순회하며 비교한다.

이 부분을 주목하자.

리액트 프로젝트를 진행하다보면 반드시 key props를 지정해달라는 메시지를 콘솔에서 자주 마주하게 된다. 이 부분에서 왜 key props를 필요로 하는지 알 수 있다.

자세한 내용은 별도의 포스팅으로 정리해두었다.
[React] key props를 전달해주어야 하는 이유

Reference

• https://ko.reactjs.org/docs/reconciliation.html
• https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060