0. 서론
React를 다루는 프론트앤드 개발자라면 Virtual DOM 에관해서 한번쯤은 들어봤을 것입니다.
[🎯 글을 쓰는 이유]
Virtual DOM 에 관해서 이미 많이 들어 대략적으로 알고 있었지만,
이 기술을 사용하는 이유, 배경이 궁금해서 찾아보다가 정리를 해두면 좋을 것 같다는 생각이 들어서 정리하기로 마음을 먹게되었습니다.
정리해야지 생각만 하고 있다가, 이번주에도 정리하지 않으면 또 미루게 될것 같아,😬 마음먹고 바로 글을 쓰기 시작해 보겠습니다.
[🔍 핵심 문장]
Virtual DOM에 대해 짧게 이야기하면,리액트 렌더링 방식의 핵심 개념중 하나로,
👉한문장으로 " 최소한으로 DOM을 수정할 수 있도록 도와주는 자바스크립트 객체(값)이다. "
라고 정리해 봤습니다.
이미 Virtual DOM에 대해서 아시는 분들은 위 말이 무슨말인지 이해하셨을거라고 생각하고,
만약 처음 보신다면 저 말의 의미가 무엇인지 생각해보며 글을 읽어보시면 더 기억에 잘 남지 않을까 생각해 봅니다.ㅎㅎ
[목차]
1. DOM 이란?
2. Virtaul DOM을 사용하는 이유(배경)?
3. Virtual DOM이란 무엇인가?
4. 리액트의 Virtual DOM을 활용한 조작 방식
5. Virtual DOM에 관한 오해
6. 마무리
🚩브라우저와 브라우저 렌더링과정, 이정도는 알자[웹지식]
0. 서론 프론트엔드 개발자에게 브라우저란 일을 제공해주는 플랫폼이고, 개발을 함에 있어서 기본이 되는, 꼭 알아야만 하는 것이라고 생각한다. 프론트엔드 면접 관련 질문을 찾아봐도 어딜가
adeveloperstory.tistory.com
여러 자료를 찾아보며, Vrtual DOM을 사용하는 이유를 알기 위해서는,
브라우저의 렌더링 과정에 대해서 아주 깊숙히 알지는 못하더라도 적어도
Critical Rendering Path 에 대해서는 알고 있어야 한다고 생각합니다.
이 글에서 모든 과정을 적게된다면 글이 난잡해 질 수 있으므로 혹시라도 모른다면 위 블로그 글을 참고해주세요!
1. DOM 이란?
🟥 DOM (Document Object Model) 이란
번역해보면, 문서 객체 모델로
1. HTML 문서의 계층적 구조와 정보를 표현하며,
2. 이를 제어할 수있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 입니다.
DOM은 트리 형태라서 특정 노드를 찾거나 수정,제거, 원하는 곳에 삽입할 수 있습니다.
👉 한 마디로 정리하면, DOM은 "HTML 문서를 파싱한 결과물" 이라고 할 수 있습니다.
✅ HTML 요소(HTML Element)
HTML 문서를 구성하는 개별적인 요소를 의미합니다.
👉 위 사진을 예로들면, <html>, <head>, <body>, <title> 과 같은 태그들을 HTML 요소라고 합니다.
👉 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됩니다.
2. Virtual DOM을 사용하는 이유(배경)
🔍 Critical Rendering Path 용어(단계들) 정리
| 1 | DOM Tree | HTML 문서를 파싱한 결과물 |
| 2 | CSSOM | CSS 문서를 파싱한 결과물 |
| 3 | 🔴 Render Tree | DOM 과 CSSOM을 결합한 결과물로, 렌더링을 위한 트리 구조의 자료구조 💥 웹 페이지의 '청사진' 이라고 볼 수 있다. HTML 요소의 레이아웃(위치와 크기)을 계산하는 데 사용되며, 브라우저 화면에 픽셀을 렌더링하는 페인팅(painting) 처리에 입력된다. |
| 4 | 💥 Laoout 단계 | 앞서 만들어진 DOM과 계산된 스타일을 따라가면서 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 생성한다. - Render Tree를 기반으로 실제 웹 페이지에 요소들의 배치를 결정하는 작업단계 |
| 5 | 💥 paint 단계 | 요소를 렌더링하는 순서, 지금까지의 정보를 바탕으로 한 페이지를 여러 개의 레이어로 나눈 다음 그 위에 모든 시각적인 부분을 그리는 작업을 진행하는 단계 |
| 6 | Composite 단계 | 페인트 단계에서 만들어진 여러가지 레이어를 스크린에 픽셀로 표현하게 되고, 나누어져 있던 레이어를 하나로 합성해서 페이지를 완성하는 단계 |
위에서 브라우저 렌더링 과정의 Critical Rendering Path 에 대해서 알고 있다고 가정하고 글을 적어보겠습니다.
Critical Rendering Path 를 따라 브라우저에 HTML 문서의 결과물이 화면에 그려지게 될 것입니다.
그렇다면 이런 질문이 생길 수 있습니다.
Critical Rendering Path 에따라 화면이 그려지는건 알겠는데, 업데이트는 어떻게 이루어 질까?
[여기서 업데이트란 이벤트에 따라 화면이 실시간으로 변화하는 것을 말합니다. ]
ex) 장바구니 추가, 찜하기, 좋아요 와 같은?
사실 위의 질문의 대답 또한 위에서 언급한 브라우저 렌더링 과정 관련 블로그 글에서 확인할 수 있습니다.ㅎㅎ
답은 바로 JavaScript가 DOM을 수정하면 업데이트가 발생하게 되는 것입니다.
DOM이 수정되면 Critical Rendering Path가 다시 실행되게 됩니다.
여기서 중요하게 알아야 할 것이 나옵니다.
🚩 바로 Critical Rendering Path과정 중에
Layout 과 Paint 단계는 비용이 많이 드는, 즉 성능에 악영향을 주는 작업이라는 사실입니다.
따라서 자바스크립트로 DOM을 조작할 경우, DOM의 수정 횟수를 최소화하여 리렌더링이 빈번하게 발생하지 않도록 주의하는 것이 중요합니다.
만약, 그런일은 거의 없겠지만, 만약 DOM을 3000번 조작하는경우, 리플로우와 리페인트 현상이 3000번 일어나는 일이 생길수 있습니다.
그렇다면, 웹 서비스의 사용자들이 그만큼 오랜시간 기다리게되는 문제가 발생할 것이라고 예상할 수 있습니다.
사용자가 오래 기다리면 그 시간에따라서 사용자가 이탈할 확률이 높다는 결과에 대해서는 익히 들어보셨을 겁니다.
[문제코드 예시]
✅ DOM 수정 3000번 발생 -> 리플로우 리페인트 3000번 발생
✅ 성능 측정 결과 4,500ms
[문제를 개선한 코드]
✅ DOM 수정 한번만 발생 -> 리플로우 리페인트 한번 발생
✅ 성능 측정 결과 250ms 걸림 [약 22배 개선됨]
🚩 결론
자바스크립트를 이용해서 DOM을 직접 조작하여 업데이트를 구현해야 할 경우, 동시에 발생하게될 업데이트들을 최대한 모아서 DOM 수정을 최소한으로 가져가야 합니다.
그에따라 리플로우와 리페인트 현상도 최소한으로 발생하여 성능을 향상시킬 수 있다는 것입니다.
하지만, 서비스의 규모가 커질 수록 위와같이 코드를 짜는것이 힘들겠다고 생각이 들겁니다.
이제 슬슬 Virtual DOM의 필요성이 느껴질텐데요 🥰
우리가 좋아하는🥰 React에서는 우리가 위와같은 것들을 신경쓰지 않아도 내부적으로 알아서 업데이트들을 모아서 최소한의 횟수로 DOM을 조작할 수 있도록 자동화를 해줍니다.
이때 사용되는 개념중 하나가 바로 Virtual DOM 입니다.
3. Virtual DOM 이란 무엇인가?
Virtual DOM이란 말 그대로 가상 DOM으로, 실제 DOM과 내용을 공유하는 복사본(객체) 이라고 볼 수 있습니다.
✅ 실제, DOM 과 다른점은 직접적으로 브라우저 화면의 UI를 조작할 수 있게 해주는 API는 제공하지 않습니다.
다시한번 정리하면,
Virtual DOM 이란 메모리에 저장되어 있는 자바스크립트 객체, 즉 값일 뿐입니다.
따라서, Virtual DOM을 수정/제거/삭제하는 과정에 있어서 연산을 많이 소요하지 않을 것이라고 생각이 들것입니다.
4. 리액트의 Virtual DOM 을 활용한 조작 방식
1️⃣ 리액트는 항상 두 개의 Virtual DOM 객체를 가지고 있습니다.
1. 렌더링 이전 화면 구조를 나타내는 Virtual DOM
2. 렌더링 이후에 보이게 될 화면 구조를 나타내는 Virtual DOM
2️⃣ 리액트는 state(상태)가 변경될 때마다 전체 UI를 Virtual DOM에 리렌더링(Re-Rendering) 합니다.
✅ 이 시점마다 새로운 내용이 담긴 가상돔을 생성하게 됩니다.
3️⃣Diffing 과정
이전 Virtual DOM에 있던 내용과 현재 Virtual DOM 내용을 비교하여 어떤 Element가 변했는지를 비교합니다.
✅ 이 과정을 리액트에서 Diffing 이라고 표현합니다.
👉 Diffing은 효율적인 알고리즘을 사용해 진행되기 때문에 어떤 Element에 차이가 있는지 매우 신속하게 파악할 수 있게됩니다.
4️⃣ Reconciliation (재조정) 과정
Diffing 과정에서 바뀐 부분만 실제 DOM에 적용합니다.
👉 이 과정이 매우 효율적인 이유는 Batch Update 떄문인데, 이는 변경된 모든 Element들을 집단화시켜 이를 한번에 DOM에 적용하는 방식입니다.
5. Virtual DOM에 관한 오해
Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교해서 무조건 빠른 것은 아닙니다.
리액트 매뉴얼을 살펴보면 다음과 같은 문장이 있습니다.
우리는 다음 문제를 해결하려고 리액트를 만들었습니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기
리액트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선할 수 있습니다.
또한, 작업이 매우 간단할 경우, 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 합니다.
👉 왜냐하면, Virtual DOM 을 생성하고 비교하는데에도 연산이 소요되기 때문입니다.
👉 리액트와 Virtual DOM이 언제나 제공할 수 있는 것은 업데이트 처리 간결성 입니다.
마무리
구글에 Virtual DOM 을 검색했을때, 이미 정리된 수많은 글들이 있었습니다.
하지만 Virtual DOM을 사용하게 된 배경에 대해서 적은 글들이 있기는 했지만, 너무 생략한 느낌이 들어 이 부분에 대해서 호기심이 생겨 많은 자료와 영상들을 보며 리액트가 Virtual DOM 을 사용하는 이유에 대해서 이해하는 시간이 되었습니다.
이 과정에서 브라우저의 렌더링 과정에 대해서도 다시한번 복습할 수 있는 시간이 되어 나름 재밌게 글을 작성하였습니다.
또한 업데이트 처리의 간결성을 위해 Virtual DOM 을 사용한다는 아이디어는 앞으로 개발을 함에 있어서 저의 생각의 범위를 확장시키는데도 도움이 됨을 느낍니다.
예를들어, 어떠한 개발작업을 함에 있어서, 비슷한 상황에서 Virtual Dom의 개념,
즉 가상의 객체를 만들어 그것을 실제 작업물에 반영하기 전에 어떠한 처리를 먼저 한 후 실제 작업물에 반영한다는 생각은 리액트 뿐만 아니더라도 충분히 사용될 수 있는 개념이라는 생각이 들었기 때문입니다.
<Reference>
1. 리액트를 다루는 기술 [김민준 저]
2. 모던 자바스크립트 deep dive [이웅모 저]
3. https://www.youtube.com/watch?v=N7qlk_GQRJU
React
The library for web and native user interfaces
react-ko.dev
5. https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb
Virtual DOM (React) 핵심정리
리액트가 수많은 개발자들 사이에서 엄청난 사랑을 받는 이유중 한가지는 바로 빠른 속도입니다.
callmedevmomo.medium.com
React에서의 가상돔 개념
🙄 리액트로 프로젝트를 만들고 있지만 아직까지도 모호한 개념들이 많아 짬이 나는 시간에 한 번 더 정리해 보기로 합니다.가상돔을 알기 위해 우선 돔의 개념부터 정리해 보자.DOM(Document Object
velog.io