React는 이벤트로 인해 데이터를 관리하는 Model에 변화가 생기면 Virtual DOM을 생성합니다.
이후 Virtual DOM과 실제 DOM을 비교하고, 변화가 발생한 부분만 업데이트 합니다.
Virtual DOM은?
UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제DOM과 동기화하는 프로그래밍 개념입니다.
이 과정을 재조정이라고 합니다.
복잡한 SPA(Single-Page Application)에서는 DOM 조작이 많이 발생합니다.
그 때마다 브라우저가 연산을 해야 하므로 전체적인 프로세스가 비효율적으로 되기 쉽습니다.
하지만 Virtual DOM을 사용하면, 실제 DOM에 적용시키기 전 가상의 DOM을 만들어 적용시키고, 최종 완성된 결과만을 실제 DOM으로 전달합니다.
이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선되며, 렌더링도 되지 않기 때문에 연산 비용이 적고, 모든 변화를 Virtual DOM을 통해 묶어 이를 실제 DOM으로 전달합니다.
옥은 부서질 지언정 흰 빛을 잃지 않고, 대나무는 불에 탈 지언정 그 곧음을 잃으려 하지 않는다.