Real DOM으로 다루면 느리다구요? Virtual DOM이 뭔데요??

원래 Real DOM(Document Object Model)은 모든 화면을 새로 그려야 하기 때문에 느리다.

이런 단점을 보완하기 위해 React가 제안한 방식이 Virtual DOM이다!

 

이건 모든 걸 바꾸는게 아니라 현재 바꾸고자 하는 내용과 동일하게 현재의 상태를 동기화시키는 것으로 연산이 빠르고 모든 연산을 할 필요가 없다.

 

즉!!!! 바뀐 부분만 비교해서 그 부분만 렌더링하는 것이다!

 

왜 빨라지냐고??

 

Real DOM을 조작하는 것은 화면에 실제로 바로 그리기 때문에 느리지만...

Virtual DOM을 조작하는 것은 실제로 화면에 그리는 것이 아니기 때문!!

 

DOM을 조작하되 최소한으로 조작해서 작업을 처리하는 방식을 쓰면 개선이 되지...!!

-> Virtual DOM 방식을 사용하면 DOM 업데이트를 추상화하기 때문에(정확히는 Real DOM에 직접 접근하여 조작하는 대신, 이를 추상화한 Javascript 객체를 구성해서 사용함. 즉, Real DOM의 사본을 씀.) DOM 처리 횟수를 최소화하고 효율적으로 진행함.

 

진행 순서

1) 데이터 업데이트 시, 전체 UI를 Virtual DOM에 리렌더링함.

2) 이전 Virtual DOM에 있던 내용과 현재 내용을 비교함.

3) 바뀐 부분만 실제 DOM에 적용함.