Virtual DOM 이란 실제 DOM에 접근하여 조작하는 대신 이를 추상화하여 자바스크립트 객체를 구성하여 사용한다. 마치 DOM 사본을 만드는 것과 비슷하다.
https://www.javatpoint.com/what-is-dom-in-react
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM과 업데이트 후의 Virtual DOM을 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
이러한 처리는 실제 DOM이 아닌 메모리 상에서 동작하기 때문에 빠르다. 또한 실제 렌더링이 발생하지 않아 연산 비용이 적다.
요소가 30개가 바뀌었다고 레이아웃을 30개씩 새로 하는 것이 아니라 모든 변화를 하나로 묶어 딱 한 번만 실행시킨다.
연산 횟수를 줄이기 때문에 실제 DOM보다 효율적이다.
Virtual DOM이 하는 것은 DOM fragment를 사용하여 하나로 묶어 적용한 다음 DOM에 던져주는 과정에 불가하다.
가상돔 단점
React의 가상 돔(Virtual DOM)은 많은 장점이 있지만, 몇 가지 단점도 존재합니다. 아래에 React의 가상 돔 사용 시 발생할 수 있는 몇 가지 단점을 정리해 보았습니다.
- 초기 로드 시간 증가
- React 애플리케이션은 처음 로드될 때 가상 돔 및 관련 라이브러리를 로드해야 하므로 초기 로드 시간이 다소 길어질 수 있습니다.
- 메모리 사용량 증가
- 가상 돔을 유지하기 위해 메모리를 추가로 사용합니다. 이는 특히 메모리가 제한된 환경이나 저사양 기기에서는 문제가 될 수 있습니다.
- 복잡성 증가
- 가상 돔의 이점을 최대로 활용하려면 컴포넌트 상태 관리와 최적화에 대한 복잡한 로직이 필요할 수 있습니다. 이는 코드의 복잡성을 증가시키고 유지 보수를 어렵게 만들 수 있습니다.
- 업데이트 오버헤드
- 모든 DOM 업데이트가 효율적이지는 않습니다. 작은 변경 사항에도 가상 돔이 새로 생성되고 비교가 수행되면, 실제 DOM 업데이트가 많지 않더라도 여전히 계산 비용이 발생할 수 있습니다.
- 타사 라이브러리와의 호환성 문제
- 일부 타사 라이브러리나 기존 코드베이스는 React와의 호환성 문제가 있을 수 있습니다. 가상 돔을 사용하는 방식과 직접적인 DOM 조작 방식을 혼용하면 예상치 못한 문제가 발생할 수 있습니다.
- 서버 사이드 렌더링(SSR) 비용
- 서버 사이드 렌더링을 구현할 때 가상 돔을 사용하는 것은 클라이언트 측 렌더링보다 복잡하고 비용이 많이 들 수 있습니다. 이는 서버의 리소스 사용량을 증가시킬 수 있습니다.
이러한 단점에도 불구하고, 가상 돔은 성능 최적화 및 개발 생산성 측면에서 많은 장점을 제공하는 중요한 기술입니다. 따라서 특정 프로젝트에서 가상 돔의 장점과 단점을 잘 고려하여 사용 여부를 결정하는 것이 중요합니다
Frontend Developer