티스토리 뷰
DOM으로 고민하지 말자! 발표자료 / DOM,가상DOM
https://www.youtube.com/watch?v=5ZY0UScTNxk
pungwa.tistory.com
처음 개발공부를 시작하고 항해99 부트캠프에서 공부한 내용으로 발표한 자료입니다.
초보자가 DOM에 대해 이해할 수 있는 수준으로 설명이 되어있습니다.
후반부에 가상돔 개념이 나오는데 많이 부족해서 이 글에 추가로 기록을 남깁니다.
가상돔에 대해 이해하려면 리얼돔이 있는데 가상돔이 왜 필요했는지 그 배경을 알아야 쉽습니다.
그리고 그 배경을 이해하기 위한 배경지식으로 브라우저 랜더링 과정에 대해 조금 더 알아야합니다.
1. 브라우저 랜더링 과정
2. 리얼돔을 사용했을때의 불편함(?)
3. 가상돔이 등장한 이유
1. 브라우저 랜더링 과정
https://d2.naver.com/helloworld/59361
위 문서를 참고했습니다.감사합니다.
브라우저는 html, css, js파일을 동기적으로 해석하여 화면에 보여주는 소프트웨어입니다.
도메인을 url창에 입력하면 이런저런(궁금하면 dns, tcp, http 찾아보기) 과정을 거져 서버로부터 html, css, js파일을 받아옵니다.
브라우저는 이 파일을 받아 파싱을 합니다.
렌더링엔진이 html을 파싱합니다. html을 파싱되어 DOM이 됩니다.
html을 읽다가 중간에 link태그를 만나면 css파일을 가져옵니다.
css를 파싱합니다. html은 DOM이 되고 css는 CSSOM이 됩니다. css파싱을 마치면 다시 html을 파싱합니다.
그리고 이 두개를 합쳐서 스타일이 입혀진 트리를 만들게 되는데 이것을 렌더트리라고 합니다.
이때 html파일에서 script태그를 만나게 되면 컨트롤을 런타임에 넘겨주고 html파싱을 중단한다고 합니다. 그리고 JS파일이 자바스크립트 해석기에 의해 먼저 실행됩니다.
(이와 관련해서 또 알아야 할것이 있으니 궁금하면 script태그 위치, async, defer 정도의 키워드로 검색!)
그리고 위 과정을 거쳐 렌더트리가 완성되면 layout단계로 넘어갑니다.
레이아웃 단계에선 각 노드가 화면에 그려질 사이즈, 위치, 스타일값 들을 연산합니다.
마지막 페인트 단계에서는 레이아웃에서 연산한 값을 바탕으로 실제 화면에 그리기 시작합니다.
dom, cssom, RenderTree, layout, paint 정도의 순서인데, 레이아웃과정 까지 반복되는 것을 리플로우, 페인트가 반복되는 것을 리페인팅 과정이라고 합니다. (이부분이 궁금하면 리플로우, 리페인팅 검색)
위 사진자료에서 배치가 layout일 것이고, 그리기가 paint 입니다.
자바스크립트에 의해 노드가 추가,제거 되거나
브라우저의 리사이징에 의한 뷰포트가 변경되거나
css에 의해 태그의 레이아웃이 변하거나
이런 경우에는 리플로우 리페인트가 발생한다. 이 리플로우, 리페인트가 연산이 무겁기때문에 이 과정을 줄이는 것이
혹은 가볍게 하는것이 최적화와 관련이 있다.
2. 리얼돔을 사용했을때의 불편함(?)
과거의 web은 사용자와의 상호작용을 고려하지 않았고, 자바스크립트를 이용해서 아주 일부 인터렉티브함을 구현했지만
지금의 웹은 사용자와 상호작용이 엄청나게 많습니다.
사용자의 행동에 따라 동적으로 바뀌는 요소가 많습니다. 이것이 구현되려면 위에서 봤던 리플로우 과정이 다시 일어나야 됩니다.
렌더트리를 만드는 것까지는 그렇게 부담되는 작업이 아니라고 합니다. layout계산과 paint에서 연산이 많이 일어나는데
어쨌든 렌더트리를 만들면 layout을 새로 연산해야됩니다. 만약 10개의 요소가 위치를 바꾼다면 레이아웃연산이 10번 일어나야 할겁니다.
한두번은 괜찮겠지만 사용자와 상호작용이 많은 CSR방식의 웹서비스에서는 레이아웃 연산이 10번 일어나면 바로 사용자 경험에 악영향을 미칠겁니다. 그래서 가상돔이 등장했습니다.
3. 가상돔이 등장한 이유
가상돔이 리플로우, 리페인트를 효과적으로 줄일 수 있게 해줍니다. 가상돔은 실제DOM 문서를 추상화한 개념으로 메모리 상에서 반영되는 dom이라고 합니다. 솔직히 추상화라는게 아직 와닿지는 않습니다.. 중요한건 이 가상돔은 리얼돔에 바로 반영하는 것처럼 레이아웃 계산과 페인트 과정이 없습니다. 그리고 메모리상에서 만들기 때문에 가볍고 빠르게 만들 수 있다고 합니다. 이렇게 사용자와 반응하는 가상돔을 빠르게 만들고 그 가상돔을 리얼돔과 비교해서 모든 변화가 있는 부분을 비교해서 한번에 반영합니다. 이렇게 되면 리플로우가 딱 1번 일어나게 됩니다. 10개가 변경되든 100개가 변경되든 실제 돔에 반영되는 것은 모든 변화가 딱 1번 반영되고 즉 레이아웃 연산도 1번 하게 된다는 뜻입니다.
가상돔 덕분에 상호작용이 많은 CSR방식의 서비스도 무리없이 만들 수 있게 되었습니다.
생각하면 할수록 이런 알고리즘을 만드는 사람들은 진짜 멋있는 것 같습니다..👍
참고:
[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG
리액트를 지난 2년간 사용하면서도 막상 말끔하게 설명하라고 하면 어려웠던 주제, 원래 번역글은 잘 안쓰지만 글 자체가 구성이 잘 되어있어서 글을 번역해보았습니다. 원본: https://hashnode.com/p
velopert.com
'React' 카테고리의 다른 글
| state변경 시 왜 useState, setState를 쓸까? (0) | 2022.06.24 |
|---|---|
| 메모이제이션 useCallback, useMemo, React.memo (0) | 2022.06.22 |
| 컴포넌트 랜더링과 자바스크립트의 속도 차이(무한스크롤 part2) (0) | 2022.05.11 |
| 무한스크롤 만들기 참쉽죠... (0) | 2022.04.19 |
| 프로필 사진 디폴트 만들어주기 (0) | 2022.04.19 |