on
React가 구성요소를 다시 렌더링할 때 | VDOM이 UI 재도장을 더 효율적...
React가 구성요소를 다시 렌더링할 때 | VDOM이 UI 재도장을 더 효율적...
반응형
지금까지 React 및 React Native에 대해 약 12개월 동안 작업해 왔습니다. 그러나 초기부터 React가 구성 요소의 일부 "상태" 또는 "제안"을 변경할 때 정확히 어떻게 "반응"하는지, Virtual DOM이 실제로 개발자의 부담을 덜어주고 업데이트된 콘텐츠를 웹 페이지에 훨씬 더 효율적으로 게시하는지에 대해 의구심을 품어 왔습니다.CT학적으로 대부분의 경우 바닐라 자바스크립트에서 수행되는 것보다 훨씬 더 이치에 맞음)
이 기사에는 DOM부터 VDOM까지 그리고 그 이상의 모든 것을 포함시킬 것입니다. 리액트 및 리액트사와 함께한 1년간의 여행에서, 저는 모든 것을 기초부터 제대로 이해하는 것이 매우 중요하다고 말할 수 있습니다.
그렇다면 DOM과 VDOM은 무엇일까요?
DOM으로 시작하겠습니다 - Document Object Model의 약자입니다
"간단하고 정확하게 말하자면, 우리가 웹페이지에서 보는 거의 모든 것입니다." 이는 실제로 부모 노드와 자식 노드를 가진 패밀리 트리 같은 구조입니다. 또한 거의 모든 어린이가 "document.getElementById, document.getElements……" 등과 같은 브라우저에서 제공하는 API를 통해 동적으로 액세스하고 조작할 수 있습니다.
여기서 주목해야 할 한 가지는 웹 페이지에서 h1 태그,
/div 등과 같이 사용자가 실제로 볼 수 있는 "실제" 요소에 대해 이야기하고 있다는 것이다. 지금까지는 실제적인 것이 있다면 가상적인 것이 있어야 한다는 힌트를 얻었을 것입니다.
이제 가상 DOM에 대해 살펴보겠습니다.
앞에서 설명한 트리 구조의 가상 표현일 뿐이지만, 앞에 있는 DOM은 볼 수 있지만 가상 DOM은 메모리 내이므로 볼 수 없습니다. 아래에서 논의할 특정 조건에서 가상 DOM으로 변환됩니다. 여기서 주목해야 할 주요 사항은 DOM이 실제로 사용자에게 표시되는 데 더 많은 시간과 노력이 소요된다는 것입니다. DOM은 버튼을 클릭하거나 의 항목 목록을 렌더링하는 것과 같은 일부 사용자 작업으로 인해 웹 페이지에서 일부 콘텐츠가 변경될 때마다 사용자에게 캔버스를 표시해야 하기 때문입니다.네트워크 호출에 따라 Real DOM이 변경되고 이러한 구성 요소도 업데이트/재도색되어 변경되지 않는 경우가 많습니다.
— 그렇다면 React는 위의 문제를 어떻게 해결하는 것 같습니까?
상위 구성요소에 상태/제안 변경사항이 있을 때마다 기본적으로 전체 구성요소를 다시 렌더링하고 전체 구성요소를 상위 구성요소와 함께 모든 하위 구성요소를 다시 렌더링합니다. 다시 렌더링한다는 것은 실제로 UI를 다시 칠하거나 DOM을 조작하여 UI를 업데이트하는 것을 의미하는 것이 아닙니다. "재렌더링"이란 구성 요소의 현재 상태를 상징하는 가상 DOM을 만들고 구성 요소의 모든 노드가 변경되었으며 이 상위 구성 요소에 대한 일부 상태/제안 변경 후 변경된 노드를 의미합니다.
그런 다음 React는 새로 생성된 VDOM을 "확산 알고리즘"에 의해 이전 것과 비교하고 실제로 어떤 부분이 변경되었는지 여부를 결정합니다.
흥미로운 것은 여기서 시작됩니다.
저는 그것이 많은 이론이었다는 것을 알고 있습니다. 그리고 이것이 제가 편집자에게 가서 실제로 어떻게 "React"가 저를 위해 어떤 것들을 최적화하고 있는지 스스로 만족시키기 위해 몇 가지 예들을 시험해 본 부분입니다. "믿어주세요, 제가 나중에 본 것은 사실 낙담이었어요." 내가 실수하는 곳이라면 어디든지 너희들의 제안을 받아들일 수 있지만, 내가 기대했던 결과가 아니었다.
저는 매초마다 제 "울" 태그에 "li" 태그를 추가하는 예에서 시작해서 이 기본적인 것들을 바닐라 JS와 리액션으로 코드화했습니다. 그리고 나서 나는 "도장 점멸"이 사실임을 확인했다.
그리고 쾅…
아래 것은 바닐라 JS의 코드입니다.
아래 것은 React에 있는 코드입니다.
다음은 두 코드의 처음 10~13초 동안의 GIF입니다. 브라우저에서 수행하는 방법에 관한 내용입니다.
첫번째는 바닐라 JS이고 두번째는 리액트,
일반적인 js 코드에서는 "UL"에 추가되는 마지막 항목에서만 재도장 또는 페인트 점멸이 발생하는 반면, "UL 업데이트 최적화"를 자랑하는 "React"의 경우 전체 "UL" 목록 항목을 실제로 재도장하고 있지 않다면 React는 확실히 바닐라 JS보다 DOM에서 더 많은 작업을 수행하고 있습니다. 내 ID는 "listItems" 배열에 이전에 있는 "li" 항목에 대해 변경되지 않습니다.
다시 한 번 말씀드리지만, 독자 여러분, 제가 어딘가에서 틀렸을 수도 있지만 문제는 제가 그것을 이해할 수 없다는 것입니다. 다른 곳에서는 볼 수 없었던 예를 통해 저를 만들고 만족시키기 위한 시도에서, 저는 제 자신을 혼란스럽게 하고 "React"나 "React에 대해 정말 수상한 점이 있나요?"에 대한 제 지식을 의심하게 되었습니다. 내가 느끼는 한 가지는 React가 우리에게 "진짜" 최적화하는 것 같은 실용적인 예들을 제시했어야 한다는 것이다.
문의사항이나 추가적인 논의가 있을 경우 아래 코멘트를 해주십시오. 빠른 답변 드리도록 하겠습니다. 기사가 마음에 들었기를
종료하는 중...
from http://it-ground.tistory.com/270 by ccl(A) rewrite - 2021-10-09 03:00:49