[0619] 가상 DOM

가상 DOM

가상 돔은 실제 돔은 아니지만 실제 돔 구조와 거의 유사하지만 더 가볍기 때문에 더 빠르게 조작할 수 있는 객체이다.

DOM 조작 과정

인스타 그램에서 좋아요를 누른다고 가정하자.
좋아요 버튼을 누르면 좋아요 버튼이 빈 하트에서 빨간색 하트로 변하게 된다.
즉, 빨간색 하트에 해당하는 엘리먼트가 DOM에서 변경되어야 한다는 뜻이다.

이때, 리액트는 기존 화면(빈 하트)의 가상 DOM과 가상 DOM 객체(빈 하트)와 변경될 화면의 가상 DOM. 총 2가지 가상 DOM을 가지고 있다.
두 가상 돔을 비교하여 어떤 노드의 변화가 일어났는지를 계산한 후, 변경이 일어난 부분만 실제 DOM에 적용시킨다.
이때, 변경사항을 한건씩 적용시키는 것이 아니라 변경사항을 모아 한번에 처리하는 Batch Update가 진행된다.