react나 vue가 js DOM조작보다 빠른 이유......???

Question

다들 SPA는 직접 DOM조작보다 빠르다고 알고계시죠.그래서 innerHTML이나 className = '' 이런거보다 빠르다고 알고계실겁니다.실제로 저도 그렇게 배웠구요.근데 이게 어떻게 가능하냐는게 제 질문입니다.리액트에서 어떤 상태가 변화하면,그 상태에 맞춰 가상DOM이 변화하고 -> 진짜 DOM에 반영됩니다.근데 react도, vue도, 결국 자바스크립트라서 내부적으로는 DOM에 반영하는 어떤 js 메소드를 쓸겁니다.예를 들면,

이것이

이렇게 변한다고 가정해보죠.innerHTML을 쓰진 않겠지만,뭔가 js 메소드를 쓸겁니다.이것을 GPT에서는 createElement()로 해결한다고 하더군요.하지만 createElement는 뭔가 만드는것이지,요소를 사라지게 하는건 아닙니다.그렇다고 직접 DOM조작인 remove()를 사용할리도 없구요.1.그래서 도대체 내부적으로 정확하게 무슨 메소드를 쓰는걸까요?2.빌드해서 빌드된 파일들을 까보면 __WEBPACK__이 어쩌구 하는 코드들이 있고, eval을 사용합니다.eval은 지양하라고 알고있는데, 도대체 무슨 용도로, 왜 사용하는걸까요?

캐티 · Accepted Answer

innerHTML은 부하가 커요! 1회성 작업외에 사용하지 않는 것이 좋아요. className도 스타일 선택자를 모두 제거하고 새로 등록했다면 느리지 않겠나요. 물론 이과정은 다양한 최적화가 가능하므로 이거 정도는 적절하게 사용해도 괜찮을 것이어요.evel은 사용이 중단된 기능이고 유사 evel을 사용해요. 동적으로 함수를 생성하는데 다시 프로그래밍이 가능한데요.결국 빠른 속도는 변경 대상이 되는 parentNode와 편집지점인 childNodes[index]를 알거나 .. 엘리먼트만 찾는 children[index]와 다르고요.최신 스펙을 기준으로 한다면 createDocumentFragment를 사용하여 빈 영역을 생성할 수 있어서 더 빠른처리가 가능해요.[1] Document: createDocumentFragment() method - Web APIs | MDN (mozilla.org)

초무쿤 · Answer

DOM트리 서칭이 빠르다는 이야기겠죠..

장독깨기 · Answer

그니까, 그게 가능하지 않습니다. 리액트가 가상돔을 사용하는 이유가 있는 것이지,가상돔이 진짜돔보다 빠를 수가 없는거죠.이유는 본인이 직접 말씀하셨구요. :)

brian55 · Answer

1번2번질문과 리엑트가 돔 업데이트가 빠르다 라는건 좀 거리가있습니다.리액트의 가상돔사용이 실제 돔 업데이트보다 빠른 이유는 배치시스템에 있습니다.상태업데이트를 통한 리랜더링과정 중 해당 상태업데이트를 배치로 묶어 한번에 업데이트를 치기때문에 돔 업데이트 횟수를 최소화하는것이고 18에와서는 단순 상태업데이트뿐만 아닌 Promise나 setTimeout, Native Event Handle 등 여러 다른 업데이트도 한번에 묶어 처리하는데에 빠르다라는 핵심이 있습니다.

킁킁탐정 · Answer

이 관련은 dom diff 라이브러리를 살펴 보면 됩니다.가장 간단하고 작은 라이브러리인 다음의 리포의 코드를 참조하시면dom 관련에서 사용하는 실제 함수들을 알 수 있습니다.https://github.com/WebReflection/udomdiffhttps://github.com/WebReflection/udomdiff/blob/main/index.js물론 diff 관련 라이브러리는 다양하고 react에서 사용하거나 vue에서 사용하는 라이브러리는 다르거나 내부적으로 수정했거나 아예 다른 알고리즘을 수 있습니다만전체적인 방식은 비슷하니 참고하시면 될꺼 같습니다.

react나 vue가 js DOM조작보다 빠른 이유......???

5개의 답변

Q&A 목록