DOM이란?
웹페이지에 들어가있는 html element들을 트리의 형태의 구조로 표현한 것
브라우저
크롬이나 사파리처럼 웹서핑에 사용되는 프로그램
브라우저에 console.log(document)를 실행해보면 document객체가 출력됨
Node.js
브라우저가 아닌 컴퓨터 자체에서 자바스크립트를 실행
Node.js에 console.log(document)를 실행해보면 document가 없다고 에러가 뜸
=> document 객체가 브라우저 환경에서만 접근이 된다는 건 document는 애초에 자바스크립트 자체의 요소가 아니라 브라우저란 환경에서 제공되는 것
사실 웹개발에서 사용되는
document 객체는브라우저에서 제공하는 window 객체의 한 요소.
그리고 이window.document객체를DOM이라고 분류함
Node
DOM에서 요소 하나하나를 Node라고 부름
ex) document, html, head, body, title 등등
API
네가 이렇게 주문하면 내가 이렇게 해줄게라고 메뉴판처럼 만들어놓은 것
const title = document.getElementById("title")
title.textContent = '주문할 것'-
코드의 이 document가 바로 document 노드를 가리킴
-
document에는 getElementById란 기능이 있는데, 이건 DOM내에서 주어진 ID를 가진 노드
-
특정 ID를 가진 요소를 선택할 때 사용했던
getElementById는Document의 고유기능 -
글자를 바꾸는데 사용했던
textContent는Node의 기능=> Node밑으로 들어오는 모든 요소들이 textContent기능을 사용할 수 있음
=> 트리에 있는 모든 요소들이 EventTarget이란 공통범주에 속함
EventTarget
클릭, 드래그, 키보드 입력 등의 이벤트를 말함
여기까진 DOM에 대해 자세히 알아보았다면(사실 더 자세한 내용이 많지만 다하면 시간도 없고 굳이 그럴 필요도 없고 머리터짐..🤯)
이젠 DOM의 단점에 대해 알아보자!
DOM 조작의 비효율성
예를 들어 유저가 좋아요를 누르거나 장바구니 목록에서 상품을 하나 삭제하거나 댓글을 남기면 전체 노드들이 처음부터 다시 그려지게 된다!
불필요한 반복이 반복되어 DOM을 조작하는 소모적인 비용이 증가하게 됨💸
최근에는 SPA를 많이 사용하면서 DOM tree를 즉각적으로 변경할 일이 생김
이럴 때 전체 페이지를 서버에서 매번 보내주는 것이 아니라, 브라우저단에서 자바스크립트가 관리하기 때문에, DOM조작을 더욱 더 효율적으로 할 수 있게 최적화가 필요하게 되어진 것
여기서, SPA란?
하나의 HTML파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠 방식을 바꾸는 방식의 웹 어플리케이션
Virtual DOM
- 실제 돔과 같은 내용을 담고있는 복사본
- 메모리 상에서만 존재하는 가상의 DOM
- 리액트는 항상 2개의 가상돔을 갖고 있음
1) 변경 이전의 내용이 담겨 있는 가상돔
2) 변경 이후 보여질 내용이 담겨있는 가상돔 - 실제 돔이 변경되기 이전에 리액트는 2개의 가상돔을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악하는데 이 과정을 Diffing이라고 함
Diffing을 통해 변경된 부분을 파악한 후,Batch Update를 수행하여 실제 돔에 한번에 적용시켜줌- 이 과정을
재조정(Reconciliation)이라고 함 - DOM을 변경해야할 때 한번만 렌더링이 일어나면 됨
