React와 Virtual DOM
React(리액트)는 Virtual DOM을 사용한다. 리액트는 SPA로 한 페이지 내부에서 끊임없이 화면이 변화하는 랜더링 과정을 거치게 된다. 일반적인 DOM의 경우 사소한 한 부분이 변경되더라도 DOM내부 전체가 리랜더링 과정을 겪게되는데 리액트에 적용하기엔 대규모 프로젝트 일 경우나 사소한 브라우저 스타일상 변화가 생길 경우 효율적인 측면에서 좋지 못할 것이다. 그렇기 때문에 사용한 것이 Virtual DOM이다.
Virtual DOM
Virtual DOM은 말 그대로 가상의 DOM을 의미한다. 실제로 웹 브라우저의 화면을 구성하는 DOM이 아닌 내부에서 관리하는 가상의 DOM을 의미하며 실제 보여지는 모델은 아니다.
리액트의 경우 사용자의 동작이나 기능 사용으로 리랜더링이 필요할 경우 Virtual DOM에 먼저 선 적용을 진행한다. 적용된 Virtual DOM은 변화 된 상태로 실제 DOM과 비교하여 달라진 부분을 확인 한 후 해당 부분만 리랜더링하여 실제 DOM에 적용한다.
이렇기 때문에 화면 구성이 많을 경우나 다수의 이펙트 혹은 이벤트가 많을 경우 Virtual DOM을 사용하면 성능면에서 좋은 결과를 낼 수 있다.
그렇지만 Virtual DOM이 항상 성능적으로 우수한 것은 아니다. DOM은 정적인 웹페이지를 추구하는 모델로 대규모적인 동적 데이터가 존재하지 않는 웹페이지의 경우 오히려 Virtual DOM을 사용하는 것이 떨어지는 성능을 보일 수 있다. Virtual DOM을 이용하는 과정이 DOM전체를 정적으로 리랜더링 하는 과정보다 오래 걸릴 수 있기 때문이다.
