![[React] Virtual DOM](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbGdplo%2FbtrR6HgTJcY%2FAAAAAAAAAAAAAAAAAAAAACMl_6uXlG2jxf9b5Q0Ix3jknzqKjbIzJyBBwIb71gW1%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1785509999%26allow_ip%3D%26allow_referer%3D%26signature%3Du%252F66JZbkrHp6gY910F4v6vddy7w%253D)
코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다
DOM에 대한 간단한 정리
DOM은 Document Object Model의 약자로 문서 객체 모델입니다.
여기서 문서 객체 모델이란 브라우저가 Javascript와 같은 스크립팅 언어가 <html><head><body>와 같는 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨것을 의미합니다.
Dom은 브라우저가 트리구조로 만든 객체 모델입니다.
Dom은 뷰포트에 무엇을 렌더링 할지 경정하기 위해 사용 되며, 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트에 의해 수정 되기 위해 사용 됩니다.
Dom은 자바스크립트에 수정 될수 있는 동적 모델입니다. 하지만 기존 html에 영향을 주지 않습니다.
Dom은 보이지 않는 요소까지 포함합니다. css로 style이 display:none이더라도, Dom은 Css의 영향전의 상태이기 때문에 포함됩니다. 이후 DOM과 CSSOM이 경합하여 렌더트로가 되어 화면에 출력 됩니다.
Virtual Dom의 탄생배경
Virtual Dom과 위에서 말하는 DOM을 구분하기 위해 해당 DOM은 Real Dom이라 하겠습니다.
Real Dom으로 화면을 구성한다고 생각하겠습니다. Real Dom은 애플리케이션의 상태가 변경이 될때 마다 변경사항을 업데이트 하기 위해 페이지 전체가 리렌더링 되어야 합니다. 예를 들어 인스타그램에 좋아요 한번 누를 때 마다 화면 전체가 흰색이 되었다 다시 렌더링 된다 생각해봅시다. 사용자의 브라우저의 능력, 인터넷 상태 등등의 이유로 페이지 리렌더링 시간이 길고 잦다면 사용자에거 나쁜 ux를 줄 수 있습니다.
우아한 테크톡의 내용을 빌려오자면
브라우저 렌더링 과정은 크게 4단계입니다.
- DOM tree 생성
- 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리 생성
- render tree 생성
- cdd 파일과 inline스타일 파싱, DOM+CSSOM=렌더트리 생성
- Layout (reflow)
- 각 노드들의 스크링에서의 좌표에 따라 위치 결정
- Paint (repaint)
- 실제 화면에 그리기
이 과정을 상태가 변경 될때마가 계속 반복한다면 속도의 저하와 나쁜 ux, 늘어나는 비용의 문제가 생길 수 있습니다.
그래서 인스타그램의 좋아요가 눌리면 좋아요 부분만 변경할수 없을까 해서 나온게 Virtual Dom입니다
Virtual DOM
Virtual Dom은 Real Dom의 친구입니다 친구친구
Real DOM가 같은 속성을 갖습니다 하지만 API는 다르기 때문에 getElementById와 같은 함수를 사용할 수 없습니다.
만약 인스타그램에서 좋아요를 눌렀다 하겠습니다.
그럼 원래 색상없던 하트가 빨간하트로 변경됩니다.
이처럼 새로운, 변경된 UI가 생기면 Virtaul DOM이 만들어 집니다.
이 Virtual DOM과 이전 Virtual DOM(여기서는 좋아요가 눌려지기 전)을 비교합니다.
비교가 끝나면 실제 DOM에 변경을 수행 할수 있는 가장 최적의 방법을 계산합니다.
계산된 최적의 방법을 실제 DOM에 적용하여 상태를 변경합니다.
이렇게 되면 실제 DOM이 변경 될떄 업데이트 비용을 줄이고, 브라우저 파워를 덜 사용하고, 결과적으로 더 빠른 렌더링도 가능합니다.
참고
https://wit.nts-corp.com/2019/02/14/5522
https://www.youtube.com/watch?v=PN_WmsgbQCo
'프론트엔드 > Codestates' 카테고리의 다른 글
| [React] useCallback (0) | 2022.11.25 |
|---|---|
| [React] useMemo (0) | 2022.11.25 |
| [HTML] 웹팩 실습 (HTML) (0) | 2022.11.24 |
| [React] 번들링 웹팩 (0) | 2022.11.23 |
| [HTML/CSS] 반응형 웹 (0) | 2022.11.21 |