DOM(Document Object Model)
기존 웹이 사용하는 DOM의 Document는 HTML을 말한다.
브라우저를 공장이라고하면 html문서는 이 공장들에 보내주는 주문서이다.
이 주문서에는 내가 원하는 웹페이지의 요소들과 그 구조가 설계도처럼 표현되어 있다.
(ex) 바디 태그 안에는 header태그랑 main 이런 구체적인 구조를 html이란 주문서에 담아 웹에 접속할 때 쓰는 브라우저에 보냄. 그러면 이 브라우저라는 공장에서 이 주문서를 보고 그 안의 html요소들 body, div,li,span, 같은것들을 실제 제품들로 제작함.
<input>이 브라우저라는 공장에 들어가면 빈칸 또는 체크박스로 기능을 갖춘 실제 input 오브젝트로 만들어짐. 이처럼 html의 각 요소들이 브라우저에서 실제로 제작됨. html 주문서에 작성한 그 전체 구조에 맞춰서 이 제품들이 배치되고, 이 것들에 내가 추가적으로 명령을 보내 속성이나 디자인 배치등을 조작할 수 있도록 된 상태. 즉 html이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고 이벤트에 반응하고 값을 입력받는 기능들을 수행할 객체들로 실체화된 형태라고 보면 된다.
어떤 언어로든 라이브러리만 갖춰지면 dom을 조작할 수 있는데 dom이 api를 가지고 있어서임
불과 몇 년 전까지 jQuery가 널리 쓰임. 간결하게 dom을 편하게 다룰 수 있고 어느 브라우저에서나 코드가 제대로 동작하도록 크로스 브라우징이 잘되어있었음. 시대가 바뀌면서 크로스 브라우징의 필요도가 줄어들고 순수 자바스크립트가 발전해서 충분히 간결하고 강력해짐. dom을 조작하는 방식도 React 같은것들이 생겨나면서 불필요하게 무겁고, 옛날 자바스크립트 방식에 맞춰진 jQuery는 점점 밀려남.
virtual DOM
DOM의 구조만 간결히 흉내낸 자바스크립트 객체.
html이란 주문서를 가지고 브라우저라는 공장들이 그 설계를 실체로 만들어낸게 DOM이라고 한다.
(ex)
이게 각 html 요소들을 가구처럼 물리적인걸로 찍어내서 주문서에 맞게 배치하는걸로 상상
<div>는 딱딱한상자, <table>은 선반 형태라고 가정하자.
이런 요소들을 제작해서 html 주문서의 구조대로 각각 적합한 위치에 가져다 놨다고 생각해보자.
그런데 JS에서 지시가 들어와서 중간에 div몇개를 빼거나 다른걸로 바꿔야되는 상황이 되었다.
dom의 html 요소들에 조작이 가해지는것임.
이런 과정들을 가구들을 직접 옮겨가면서 즉, 실제 dom을 조작해서 하려면 컴퓨터에 부담이 되고 속도가 느려진다.
그래서 가상돔을 사용하여 이 가구들을 똑같이 미니어처로 만들어서 얘네를 움직여가면서 어떤 가구들이 실제로 위치가 바뀌는지 먼저 파악하고 실제 가구들을 옮기는것이다.
차이가 생기는 부분만 파악해서 실제 dom에 반영한다.
정리
- 기존 DOM에서는 HTML이란 주문서를 가지고 브라우저라는 공장들이 그 주문서 안에 있는 설계(예를들어 div를 책상, table을 선반)를 실체로 만들어 냄
- 그러나 자바스크립트에서 div를 몇개 빼거나 추가하거나 변경하게되는 상황이 되면 설계가 된 실체를 직접적으로 바꾸는건 컴퓨터에 부담이 되고 속도가 느려짐
- 이런 가구들을 똑같이 미니어처로 만들어서 그 안에서 먼저 조작을 해보고 차이가 생기는 부분만 실제 dom에 반영하도록 하는것 => virtual dom
'React' 카테고리의 다른 글
[React] 컴포넌트의 라이프사이클 메서드 (0) | 2023.03.23 |
---|---|
[React] 컴포넌트 반복 (0) | 2023.03.21 |
[React] ref : DOM에 이름 달기 (0) | 2023.03.16 |
[React] 이벤트 핸들링 (0) | 2023.03.16 |
[React] 컴포넌트 (0) | 2023.03.16 |