virtual DOM

virtual DOM

가상 돔이 나오게 된 이유

결론부터 말하자면 DOM이 느리기 때문이다. 큰 규모의 웹이나 앱은 수 많은 데이터가 있고 사용자가 사용하면서 그 많은 데이터들이 로드가 된다.
이러한 많은 데이터들을 직접 DOM에 접근하여 변화를 주면 성능에 관한 문제들이 발생한다.
DOM 자체는 빨라지지만 DOM에 변화가 일어났을 때 재랜더링이 일어나면서 시간이 많이 허비 되는 단점이 있다.

가상 돔이란

가상 돔은 실제 돔과 달리 실제 돔에 접근하지 않고 비주얼 돔을 사용하여 성능을 높이는 것이다.

돔의 상태를 메모리의 저장을 하고 변경전과 변경 후의 상태를 비교해서 최소한의 내용만을 바꿔는 주는 것이다. 가상 돔은 실제 돔의 상태를 메모리 위에 올려두고 돔에 변경이 있을 때에만 해당 부분을 변경을 한다.

리액트가 가상 돔을 이용하는 절차

1. 데이터가 업데이트가 되면, 전체 ui를 가상돔에 리렌더링 한다.
2. 이전의 가상 돔에 있던 내용과 현재의 내용을 비교한다.
3. 바뀐 부분만 실제 돔에 적용한다.