Virtual DOM

Virtual DOM

• 메모리에 돔이 가상으로 저장 되어있는걸 말하고

• 상태가 변경되면 이전에 저장된 돔트리와 비교해서 실제 업뎃되어야 하는 부분만 모아서 다시 렌더링 하기 때문에 성능에 좋다

• DOM 노드는 10개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정(리플로우 리페인트) 10번 일어나서 성능저하의 원인이 된다. 가상돔은 변경된 여러 부분을 체크하고 브라우저 DOM을 변경하기 때문에 단 한번의 렌더링 과정만 거치게 된다. 즉, DOM 변화를 최소화 시켜주는 역할을 함

렌더링 되는 순서

• 처음 렌더링시 돔트리 생성하고 저장됨

• 데이터 상태가 변경되서 노드가 변경이 되야한다면

• 이전에 저장된 가상 돔트리와 비교함

• 차이가 있는 부분을 확인하고 변경해야 할 부분만 업데이트 후

• 브라우져의 돔트리를 변경하고 화면에 보여줌

추가

• 만약 개발자 도구 창 > html 엘레먼트 요소들이 모두 마구 마구 바뀌면 잘못된것

• 사용자 스무스한 빠른 업데이트 : 1초에 60개의 프레임이 화면에 보여줘야지 빠르고 스무스하게 느껴짐