[React] 📖 Virtual DOM

❓ DOM(Document Object Model)

브라우저 상에서 자바스크립트가 HTML 문서를 조작하기 위한 API다.
자바스크립트가 직접 HTML을 동적으로 변경하는 데 한계가 있기 때문에 조작하기 편하게 DOM이란 형태로 바꿔놓은 것이며, 더 다양하고 복잡한 인터렉션을 만들고 화면을 구현하기 위해 필요하다.

❓ 가상 DOM(Virtual DOM)

DOM을 추상화한 가상의 객체라고 할 수 있다.
Dom 조작에 의한 렌더링이 비효율적이며, SPA(Single Page Application) 특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 어려워지는 문제를 해결하기 위한 기술이다.
즉, DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 렌더링을 자주하게 되고, 그만큼 pc 자원을 많이 소모하게 되는 문제를 해결하기 위한 기술이라고 정리할 수 있다.

❓ Virtual DOM 동작 원리

• Virtual DOM이라는 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓는다.
• Virtual DOM은 DOM과 유사한 역할을 담당한다.
• 변경 사항이 있을 경우 DOM에서 직접 수정하는 것이 아니라 중간 단계로 Virtual DOM이 수정하고, Virtual DOM을 통해 DOM을 수정하게 한다.
• 실질적으로는 Virtual DOM에 변경 내역을 한 번에 모으고(버퍼링) 실제 DOM과 변경된 Virtual DOM의 차이를 판단한 후 구성 요소의 변경된 부분만 찾아 변경하고 그에 따른 렌더링을 한 번만 수행한다.(재조정)
• 실질적인 DOM 관리를 Virtual DOM이 하게 된다.

❓ React - Virtual DOM

react의 경우 변화를 감지하는 방법으로 observable을 사용한다. 즉 state에 변화가 생겼을 때 리액트에게 렌더링을 해야한다는 것을 알려주는 방식이다. 이런 observable 방식은 변화에 대한 알림을 받으면 전체를 렌더링하고, 이는 많은 reflow-repaint 비용을 발생시킨다.
이렇기 때문에 react는 Virtual DOM을 사용해 특정 state에 변화가 생기면 Real DOM 전체를 렌더링해주는 것이 아니라 Virtual DOM을 렌더링한다.
즉 브라우저를 렌덜이 시키는 비용 VS 객체를 새로 만드는 비용이기 때문에 Virtual DOM을 사용하는 방식은 충분히 효율적이다라고 할 수 있다.

❓ Virtual DOM 한계

• Virtual DOM 을 쓰면 무조건 빠른 것이 아니다. 충분히 빠르다고 말할 수 있을 뿐, 똑같이 최적화를 해주고, 반복 렌더링을 하지 않도록 해야한다.
• Virtual DOM은 메모리에 존재한다. 즉 메모리 사용이 많이 늘어난다.
• Virtual DOM을 조작하는 것도 많은 컴포넌트를 조작하게 된다면 오버헤드가 생기기 마련이다. Virtual DOM 제어가 Real DOM 제어보다 상대적으로 비용이 적게 드는 것이다.