# Virtual DOM #### Virtual DOM * 메모리에 돔이 가상으로 저장 되어있는걸 말하고 * 상태가 변경되면 이전에 저장된 돔트리와 비교해서 실제 업뎃되어야 하는 부분만 모아서 다시 렌더링 하기 때문에 성능에 좋다 * DOM 노드는 10개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정(리플로우 리페인트) 10번 일어나서 성능저하의 원인이 된다. 가상돔은 변경된 여러 부분을 체크하고 브라우저 DOM을 변경하기 때문에 단 한번의 렌더링 과정만 거치게 된다. 즉, DOM 변화를 최소화 시켜주는 역할을 함 #### 렌더링 되는 순서 * 처음 렌더링시 돔트리 생성하고 저장됨 * 데이터 상태가 변경되서 노드가 변경이 되야한다면 * 이전에 저장된 가상 돔트리와 비교함 * 차이가 있는 부분을 확인하고 변경해야 할 부분만 업데이트 후 * 브라우져의 돔트리를 변경하고 화면에 보여줌 #### 추가 * 만약 개발자 도구 창 > html 엘레먼트 요소들이 모두 마구 마구 바뀌면 잘못된것 * 사용자 스무스한 빠른 업데이트 : 1초에 60개의 프레임이 화면에 보여줘야지 빠르고 스무스하게 느껴짐 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sunmermi.gitbook.io/blog/section/react/virtual-dom.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.