[React] Virtual DOM

React 는 Virtual DOM 을 사용한다.

이 Virtual DOM 은 실제 DOM을 조작하는 방식이 아닌, 두개의 DOM 을 비교해 달라진 부분을 리렌더링 시켜주는 방식으로 작동한다.
물론 Virtual DOM 을 사용하지 않고 직접 DOM 을 바꾸는 방법이, 규모가 작고 정적인 이전의 웹 어플리케이션 이라면, 일반 DOM 을 직접 변경하는 것이 성능이 더 좋다.
그럼에도 불구하고 React 가 Virtual DOM 을 사용하는 이유는 무엇일까?

Virtual DOM 을 사용하는 이유

React 는 대규모 SPA 와 다이나믹 UI 웹 페이지를 만들기 위해 만들어졌다.
그러므로 직접 DOM 을 수정하는 것은 트렌드가 맞지 않다. DOM 조작이 빈번하게 발생하게 되고, 그 변화를 적용하기 위해 브라우저는 계산을 계속 할 것이고, 프로세스가 비효율이 된다.

Virtual DOM 은 기존 DOM 과 변경된 가상 DOM 과의 변경 사항을 확인하고, 최소한의 내용만 변경한다.
아래의 돔 변경 방식을 보면 한눈에 이해가 될 것이다.

UI&UX 가 변경되는 과정은 다음과 같을 것이다.

1. UI 가 변경되면, 변경된 UI 를 Virtaul DOM 에 렌더링
2. 현재 Virtual DOM 과 이전 Virtual DOM 을 비교해 변경된 부분을 감지
3. 변경된 부분만 실제 DOM 에 반영 ( 관련된 Node 전체가 업데이트 될 것임을 확인하자 )

 

참고자료

The Virtual DOM