늘 겸손하게

React - Virtual DOM과 작동원리 본문

Programming/React

React - Virtual DOM과 작동원리

besforyou999 2022. 7. 17. 20:42

DOM이란?

 

Document Object Model의 축약어로 브라우저에서 다룰 HTML을  파싱하여 이해하기 쉽게 트리 구조로 표현한 객체입니다. DOM은 웹 페이지의 객체 지향 표현이고, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다. 기본적으로 자바스크립트에는 DOM을 조작할 수 있는 DOM API들을 제공합니다.

 

Virtual DOM이란?

 

위의 DOM을 추상화한 객체입니다. DOM을 추상화한 가벼운 사본을 메모리에 만들어 놓은 것.

 

DOM 추상화 이유

 

DOM을 반복적으로 직접 수정하면 수정이 일어날때마다 브라우저 렌더링이 일어나게되고, 변경점이 없는 부분까지 리렌더링되어 PC 자원을 낭비하게됩니다. 이 문제를 해결하기 위해 DOM을 추상화합니다.

 

작동원리

 

변경사항이 있을때 DOM을 다시 로딩하여 렌더링하는것이 아니라 Virtual DOM에다가 변경사항을 적용하고, 이전 Virtual DOM과 변경이 가해진 Virtual DOM을 비교하여 차이점을 기억합니다( Diffing ). 그런 뒤, 실제 DOM과 Virtual DOM사이에 차이점만 다시 렌더링하는 방식으로 변경사항이 없는 부분의 반복적인 리렌더링을 막습니다.

 

 

 

 

출처 :

https://velog.io/@qortmdalsdl/React-%EB%8F%99%EC%9E%91-%EA%B5%AC%EC%A1%B0-Virtual-DOM

 

React 동작 구조 (Virtual DOM)

이미 많은 프로젝트를 하며 React로의 개발은 능숙하다. 하지만 다들 동작 구조에 대해서는 두루뭉실하다. 동작 구조부터 확실히 잡고 가면 한 단계 더 발전할 수 있다. React와 Virtual DOM 렌더링 방

velog.io

https://jeong-pro.tistory.com/210

 

Virtual DOM 동작 원리와 이해 (with 브라우저의 렌더링 과정)

Virtual DOM? 1. Virtual DOM이란? → "DOM을 추상화한 가상의 객체" DOM을 추상화한 가상의 객체라고 표현해봤습니다. (개인이 내린 정의) 그러면 우선 저 문장을 이해하기 위해서 DOM이란 뭔지 알아야합니

jeong-pro.tistory.com

https://www.howdy-mj.me/dom/what-is-dom/

 

DOM과 Virtual Dom이란?

“직접 DOM에 접근하는 것은 지양해야 한다.” 프론트 특히 SPA를 다루다 보면, DOM(Document Object Model)이란 단어를 많이 마주친다. 하지만 영문으로 봐도 정확히 무슨 뜻인지 와 닿지 않는다. DOM이란?

www.howdy-mj.me

 

'Programming > React' 카테고리의 다른 글

Redux - 왜 Redux를 사용하나요?  (0) 2022.07.18
React - 왜 React를 사용하는가?  (0) 2022.07.17
React - react-router-dom - useHistory + 데이터 전달  (0) 2022.07.13
React - MUI Accordian 스타일 접기/펼치기 버튼  (0) 2022.07.12
React - Module not found: Can't resolve '@mui/material/utils' : (v5, which included a name change.)  (0) 2022.07.12
'Programming/React' Related Articles more