2021/10/13 2

[React] 가상돔 Virtual DOM이란?

가상 돔(Virtual DOM) 이란? Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용 ✅ 실제 DOM의 가벼운 사본 DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하는 기능 → 성능 향상 가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고, DOM에 변경이 있을 경우 해당 변경을 반영함 리액트가 가상돔을 반영하는 절차 EX) 특정 페이지에서 데이터가 변했다고 가정 했을 경우. - 리액트를 이용해 돔을 업데이트 시키는 절차 1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함 2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔 끼..

[React] DOM이란? 가상 돔 (Virtual DOM )이 나오게 된 이유

돔(DOM)이란? DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할 ❓❔ 자바스크립트는 어떻게 HTML 태그들을 조종할 수 있는 걸까? - Document라는 전역 객체를 통해 접근 - window라는 객체는 document객체의 상위에 위치 🙄❕❓ 가상 돔 (Virtual ..

728x90