DOM 검토

DOM(문서 객체 모델)은 노드가 있는 트리 구조로 HTML 문서를 나타내는 인터페이스입니다.이 구조는 프로그래머가 문서를 훑어보고 수정할 수 있으며, 각 노드는 하나의 대상으로 표시된다.DOM은 브라우저에서 다음과 같이 생성됩니다.
웹 페이지를 불러옵니다.
보낸 사람MDN:
브라우저는 HTML을 DOM 트리로 분석합니다. HTML 해석은 태그화 및 트리 구조와 관련됩니다. HTML 태그는 시작 태그와 끝 태그, 속성 이름과 값을 포함합니다. 문서의 형식이 정확하면 더 간단하고 빠르게 해석됩니다. 해석기는 태그화된 입력을 문서로 해석하여 문서 트리를 만듭니다.
UI가 변경될 때마다 DOM이 업데이트되며 UI를 다시 그려야 합니다.CSS를 다시 계산해야 하고 레이아웃의 형상을 계산해야 하며 브라우저가 화면에 요소를 그려야 하기 때문에 다시 그리거나 렌더링하는 것은 느린 과정입니다.이것이 바로 React 버전의 DOM의 용무지입니다.

React의 가상 DOM

가상 DOM 또는 VDOM은 React 요소가 객체로 표시되는 메모리에 저장된 트리 구조이기 때문에 실제 DOM과 매우 비슷합니다.이 트리에는 화면의 내용을 변경할 필요 없이 실제 DOM과 같은 속성이 많이 있습니다.이것은javascript 대상으로 응용 프로그램의 구성 요소를 표시하고React를 통해 신속하고 효율적으로 업데이트할 수 있습니다.
JSX 요소 또는 요소 상태 변경이 나타나면 새 VDOM 트리가 생성됩니다.이 트리를 만드는 함수는 React의 render () 함수입니다.이것은 빠른 과정입니다. 가상 DOM 트리는javascript 대상일 뿐, 사용자 인터페이스는 이 새 트리를 기반으로 다시 그리지 않습니다.
VDOM을 만들면 React에서 이 새 표현을 가상 DOM 이전 버전의 스냅샷과 비교하여 어떤 요소가 변경되었는지 정확하게 볼 수 있습니다.
차이를 알게 되면 React는 실제 DOM에서 다른 객체만 업데이트하고 브라우저는 화면을 다시 그립니다.다음 응용 프로그램에서 구성 요소의 상태나 속성이 변경되면 새 React 요소 가상 DOM 트리를 만들고 이 과정을 반복합니다.

"확산"

새 VDOM 트리와 이전 VDOM 트리 사이의 차이를 확인하는 과정을 "차점"이라고 합니다.차이점은 계발식 O(n) 알고리즘으로 완성됩니다.이 과정에서 React는 실제 DOM을 업데이트하는 데 필요한 최소 단계 수를 유도하여 불필요한 비용이 많이 드는 변경 사항을 제거합니다.이 과정을 화해라고도 부른다.
출처:
"반면 React는 두 가지 가정을 바탕으로 계발식 O(n) 알고리즘을 구현했습니다.

두 종류의 서로 다른 원소는 서로 다른 나무를 생성한다.

개발자는 하나의 키로 어떤 하위 요소가 서로 다른 렌더링에서 안정을 유지할 수 있는지 제시할 수 있다."

React Docs
빠른 우회로
보충 설명으로, 요소가 여러 개의 하위 노드를 포함할 때, 관건은 React에서 어떤 하위 노드가 변경되었는지 추적하는 데 사용할 수 있습니다.차분 알고리즘은 하위 요소의 차이를 점차적으로 검사하기 때문에 끝에 하위 요소를 첨가하면 이 추가는 유일한 업데이트로 간주된다.그러나 예를 들어 시작할 때 요소를 추가하면 React는 요소의 줄에 차이가 있기 때문에 다음 하위 요소를 업데이트해야 한다고 생각할 수 있습니다.예:

  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

키를 사용하지 않으면 "React는 모든 하위 트리를 변하게 합니다. 이 트리는 <li>Duke</li> 및 <li>Villanova</li> 하위 트리를 변하지 않게 할 수 있다는 것을 의식하지 않습니다. 이런 효율 저하는 문제가 될 수 있습니다."
키 속성을 사용하면 React는 어떤 하위 레벨이 존재하거나 업데이트가 필요하거나 존재하지 않는지 판단할 수 있습니다.

React가 대량 업데이트됨
React의 "가상 DOM"을 빠르게 만드는 또 다른 일은 DOM을 대량으로 업데이트할 수 있다는 것입니다.React는 업데이트 준비가 완료될 때까지 기다릴 것이며, 한 단계에서 DOM에 대한 모든 업데이트를 실행해서 한 번만 다시 그리도록 합니다.

문서 요점을 요약하여 다시 말하다.

한마디로 DOM 작업 자체는 느리지 않지만 UI를 다시 그리는 데 비용이 많이 듭니다.React의 가상 DOM은 DOM에서 변경해야 할 요소만 조작하고 이 업데이트를 대량으로 전송함으로써 이러한 그리기 이벤트를 최소화하는 데 도움을 줍니다.이러한 대량 업데이트는 불필요한 느린 그리기 이벤트를 방지하고 React 응용 프로그램을 더욱 효율적으로 할 수 있습니다.
Pexels에서 온 Min An 자켓 사진.