[코드잇 풀스택 1기] - React Virtual DOM

React Virtual DOM ?

React의 Virtual DOM(가상 DOM)은 리액트의 성능을 최적화하는 핵심 기술입니다.

가상 DOM은 실제 DOM의 경량화된 사본으로, 리액트는 효울적인 업데이트를 수행합니다.

 

동작 원리 !

1. 초기 렌더링

- 리액트 컴포넌트가 처음으로 렌더링할 때, 가상 DOM 트리가 생성됩니다. 

 

2. 상태 변경

- 컴포넌트의 상태가 속성이 변경되면 리액트는 새로운 가상 DOM 트리가 생성이 됩니다.

이 새로운 가상 DOM 트리는 변경된 상태를 반영합니다.

 

3. Diffing 알고리즘

- 액트는 이전 가상 DOM 트리와 새로운 가상 DOM 트리를 비교(diffing)하여 변경된 부분을 찾아냅니다.

diffing 알고리즘은 최소한의 연산으로 두 트리의 차이점을 효율적으로 계산합니다.

 

4.패칭

- 3에서 차이점을 계산한 후, 리액트는 실제 DOM에 필요한 최소한의 변경사항만 적용합니다. 

 

 

Virtual DOM을 사용 이유 ?

1. 성층 최적화

- 실제 DOM 조작은 비용이 많이 들고 느리다, 하지만 가상 DOM을 통해서 변경된 부분만 실제 DOM에게 적용하기때문에, 성능이 크게 상승한다.

 

2. 예측 가능성

- 가상 돔은 일관된 방식으로 동작하며, 상태 변화에 따른 UI 업데이트를 예측 가능하게 만듭니다.

 

3. 간편한 업데이트

- 가상 돔 덕분에 개발자는 상태나 속성의 변경을 걱정하지 않고, UI를 업데이트할 수 있습니다.