가상 DOM: React의 빠른 DOM 업데이트 뒤에 숨은 기술입니다.

안녕하세요 여러분, 프로그래밍 세계의 다양한 개념을 설명하는 새로운 게시물 시리즈를 시작하게 되어 기쁩니다. 멱등성 및 관용적 용어부터 라이브러리 및 프레임워크와 관련된 보다 구체적인 개념까지 모든 것을 다룰 것입니다. 그리고 오늘은 Virtual DOM이라는 주제에 대해 자세히 알아보겠습니다.

이 내용이 도움이 되셨다면 다음에 다루었으면 하는 주제에 대해 좋아요, 공유, 댓글을 눌러주세요. 더 이상 시간낭비하지 말고 바로 Virtual DOM!

으로 뛰어들어 봅시다.

참고: 계속하기 전에 Virtual DOM의 개념이 React에만 국한되지 않는다는 점을 이해하는 것이 중요합니다. Vue와 같은 다른 JavaScript 프런트엔드 라이브러리도 이를 사용하여 렌더링 성능을 향상시킵니다.

DOM

DOM(문서 개체 모델)은 노드나 개체를 사용하여 HTML 문서(또는 웹페이지/웹 애플리케이션)를 트리 모양으로 표현한 것입니다. DOM은 프런트엔드 라이브러리와 프레임워크(javascript)가 API를 통해 프로그래밍 방식으로 문서와 상호 작용하고 조작할 수 있도록 설계되었습니다.

왜 가상 DOM인가?

DOM은 API를 통해 문서를 조작하는 효율적인 방법을 제공하지만 화면에 수천 개의 요소가 있으면 성능이 문제가 될 수 있습니다. DOM 업데이트에는 전체 하위 트리를 삭제하고 다시 만드는 경우가 많기 때문입니다.

여기서 가상 DOM이 작동합니다. Virtual DOM은 Real DOM의 경량 인메모리 표현으로, 조정

이라는 프로세스로 실제 DOM에 대한 변경 사항을 빠르고 효율적으로 동기화할 수 있습니다.

여기서 기억해야 할 주요 사항은 다음과 같습니다.

1. Virtual DOM은 Real DOM의 경량 버전입니다. 즉, Real DOM의 모든 속성을 갖고 있지 않으므로 작업 효율이 더 높습니다.
2. 가상 DOM은 메모리에 존재하므로 변경 사항이 Real DOM에 적용되기 전에 더 빠르고 효율적으로 조작할 수 있습니다.

이를 염두에 두고 DOM API를 사용하는 JavaScript 라이브러리는 자체 가상 DOM을 생성하고 조작합니다. 필요한 경우에만 Real DOM을 업데이트하고 심지어 최소한의 작업으로 업데이트합니다.

React에서 가상 DOM은 어떻게 처리되나요?

React JS는 Facebook에서 사용자 인터페이스 구축을 위해 개발한 인기 라이브러리입니다. 단순성으로 인해 엄청난 인기를 얻었으며 많은 현대 웹 프로젝트에서 사용되었습니다.

다른 많은 JS 프런트엔드 라이브러리와 마찬가지로 React는 가상 DOM 개념을 사용하여 애플리케이션에서 다시 렌더링 및 업데이트를 효율적으로 관리합니다.

React는 조정 기술과 함께 차이 알고리즘을 사용하여 이 프로세스를 최적화합니다. (구체적으로는 ReactDOM 라이브러리가 이 작업을 뒤에서 처리합니다.)

단계별로 분석해 보겠습니다.

1. React 컴포넌트의 render() 함수

   • react 컴포넌트의 render() 함수는 먼저 JSX로 React Element/Virtual DOM을 생성합니다.
   • Real DOM 대응의 경량 버전과 $$typeof, props와 같은 추가 속성이 포함되어 효율적인 비교를 용이하게 합니다.

2. 비교 알고리즘

   • React 구성 요소가 업데이트될 때마다 새로운 가상 DOM이 생성되고 비교 프로세스가 시작됩니다. 이는 두 가지 주요 가정을 기반으로 하는 O(n) 휴리스틱 알고리즘입니다.
     1. 다양한 유형의 요소가 다양한 나무를 만들어냅니다.
     2. key prop을 사용하여 렌더링 간에 일관성을 유지하는 하위 요소를 추적할 수 있습니다.

2.1. 비교 알고리즘 단계

• 알고리즘이 두 가지 유형의 DOM 요소를 발견하면 이전 가상 DOM을 해체하고 새 요소의 사양에 따라 처음부터 새 DOM 요소를 생성합니다.
• React가 동일한 유형의 DOM 요소를 발견하면 이전 DOM 객체를 보존하고 변경된 속성만 업데이트합니다.
• 같은 유형의 React 요소의 경우 React는 이전 DOM 객체를 그대로 유지하고 업데이트된 props를 제공합니다.
• 하위 요소를 처리할 때 React는 두 하위 요소 세트(기존 가상 DOM 트리 및 새로 생성된 트리)를 반복하여 차이점이 있는 부분을 업데이트합니다.

2.2. 키를 사용하는 이유는 무엇인가요?

마지막 지점에서 언급했듯이 diffing 알고리즘은 하위 목록을 반복하고 필요한 경우 변경합니다. 하위 목록에서 키를 사용하지 않으면 성능이 저하될 수 있으며 예상치 못한 동작이 발생할 수 있습니다.

예제 보기:

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

위 시나리오에서 알고리즘은 실제로 수정을 효율적으로 처리할 수 있습니다. 각 인덱스 하위 항목을 살펴보고

apple

&&

파인애플

두 목록 모두에서 동일하며

grape

새 목록에만 존재하므로 이전 목록에 하나를 추가합니다.

그러나 우리는

포도

처음에는.

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

여기서는

포도

apple

대신,

apple

;

파인애플

그리고 새로운

파인애플

마지막 위치에 있습니다. 따라서 strach의 모든 요소를 ​​다시 생성합니다.

이 성능 병목 현상을 해결하기 위해 React 팀 직원은 알고리즘에서 사용할 수 있는 목록 하위 항목에 첨부된 고유 ID인 Key를 사용하여 항목을 그대로 유지할 수 있는지 확인하고 위치를 다시 정렬하거나 다시 만들어야 합니다.

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>grape</li>
  <li>apple</li>
  <li>pineapple</li>
</ul>

이제 React는 Key 속성을 사용할 수 있으며 새 하위 항목을 추가하는 동안 업데이트되지 않은 하위 항목의 위치만 변경할 수 있습니다.

3) ReactDOM의 render() 함수

마지막으로 ReactDOM의 render() 함수가 호출되어 새로운 Virtual DOM과 Real DOM 간의 차이점을 조정합니다. 그 결과 HTML을 효율적으로 다시 렌더링하는 데 필요한 작업이 최소화됩니다.

결론

이 기사에서는 최소한의 DOM 작업으로 데이터 및 요소 변경 사항을 효율적으로 처리하기 위해 많은 프런트엔드 라이브러리에서 사용하는 기술인 Virtual DOM을 살펴보았습니다. 또한 React가 업데이트를 최적화하기 위해 구체적으로 어떻게 비교 및 ​​조정 프로세스를 사용하는지 살펴보았습니다.

이 게시물이 Virtual DOM의 작동 방식을 더 잘 이해하는 데 도움이 되었기를 바랍니다. 개념을 잘 아셨더라도 Virtual DOM이 무엇인지, 최적화된 프런트엔드 환경을 만드는 데 어떻게 기여하는지 이제 아시겠죠 바랍니다.

위 내용은 가상 DOM: React의 빠른 DOM 업데이트 뒤에 숨은 기술입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!