DOM(돔)
사전적 단어를 먼저 보자.
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
저 어려운 말을 쉽게 설명해보면,
웹 페이지가 마치 책처럼 생긴 것이라고 상상해보자. 그럼 DOM은 그 책의 쪽수와 내용을 알려주는 것이다. 책의 쪽수를 보면 어디에서 어떤 내용을 찾을 수 있는지 알게 된다. 그리고 그 책에서 특정한 부분을 찾고 그 부분을 변경하거나 조작할 수 있는 도구이다.
DOM(돔)의 모양
- 기본적으로 트리구조라고는 다들 들어봤을거다.
- 개발자도구로 그 모양을 대략 짐작해갈 수 있다.
정말 트리모양 같지 않나??😒
DOM(돔) 접근법
- 사실 이번 포스팅에서는 접근방법이 메인은 아니지만, 진짜 간단하게 나열만 하고 넘어가겠다.
- document.getElementById, document.getElementsByClassName, document.getElementsByTagName 등등으로 접근이 가능하다.
- 브라우저는 웹 페이지의 HTML 코드를 읽고 이를 DOM 트리로 변환하며, 웹 페이지의 구조를 프로그래밍적으로 표현한다. 따라서,
document객체를 통해 DOM에 접근하고, 다양한 메서드와 속성을 사용하여 DOM 요소를 찾고 조작할 수 있다.
브라우저 렌더링과정에서 DOM트리 생성
DOM이 생성되는 시기를 보자. 먼저 브라우저 렌더링 과정을 살펴보자.
- URL 입력 및 HTTP 요청
- 사용자가 웹 주소(URL)를 입력하면, 브라우저는 해당 URL로 HTTP 요청을 보내서 웹 서버로부터 웹 페이지의 HTML 파일을 받아온다.
- HTML 파싱 및 DOM 트리 생성
- 브라우저는 받아온 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다.
- 이 트리는 웹 페이지의 구조를 나타내며, HTML 태그와 요소들을 트리 구조로 정리한 것이다.
- CSS 파싱 및 CSSOM 트리 생성
- 브라우저는 HTML 파싱 중에 CSS 링크 또는 스타일 태그를 만나면 이를 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다.
- CSSOM은 웹 페이지의 스타일 정보를 나타내며, DOM 트리와 연결되어 요소에 어떤 스타일이 적용되는지를 정의한다.
- Layout(다시 렌더링 된다면, Reflow)
- 렌더 트리의 각 노드들이 브라우저의 뷰포트 내에서 어느 위치에 어떤 크기로 배치되어야 하는지에 대한 정보를 계산
- 상대적인 단위 (예: %, vh, vw)는 픽셀로 변환되며, 요소의 크기와 위치가 결정된다.
- Paint(다시 렌더링 된다면, Repaint)
- 렌더 트리의 각 노드들을 실제 화면에 픽셀로 그리는 작업이 수행된다.
- 이때, Reflow가 발생하면 Paint가 반드시 수행되어야 한다.
- Render
- 그려진 픽셀이 사용자의 화면에 표시되며, 웹 페이지가 화면에 표시되고 사용자가 상호작용할 수 있게 된다.
Virtual DOM(가상돔)의 등장
앞에서 렌더링 과정을 살펴보았다. 그런데 문제가 하나 있다. DOM을 수정할 때마다 Render Tree의 생성부터 Reflow, Repaint의 과정을 다시 수행해야 한다.
이것은 성능 저하의 주 원인이 되며, 특히 Reflow, Repaint의 과정에서 많이 발생한다. DOM에서 발생하는성능저하를 최소화 하기 위해서는 결국에는 DOM의 수정을 최소화 해야한다.
이 문제를 해결하려 Virtual DOM이 등장했다.
Virtual DOM(가상돔)?
- 리엑트는 가상돔이라는 개념을 도입했고, 이는 빈번한 렌더링으로 발생하는 성능 저하를 해결하는 방안으로 사용된다.
- 실제로 리엑트를 보면 자바스크립트의 UI 라이브러리라는 것을 알 수 있다.
Virtual DOM(가상돔)의 방식
- 리엑트의 가상돔은 실제 DOM 과 같은 내용을 담고 있는 복사본이다.
- 두 개의 가상돔으로, 처음은 변경 이전의 가상돔, 두번째는 변경 이후의 가상돔이다.
- 변경된 내용이 렌더링 되기 전에, 기존의 2개의 가상돔을 비교하며, 변경된 부분을 찾는다. 이때 diffing이라는 알고리즘이 활용이 된다.
- diffing 알고리즘의 원리는 ‘휴리스틱’을 통하여 빠르게 해결한다. 전체 DOM 트리를 탐색하고 비교하는 일반적인 알고리즘은 O(n^3)이지만 react는 O(n)으로 처리한다.
- 비슷한 컴포넌트의 경우에는 같은 계층에 존재할 가능성이 높이니 같은 계층의 컴포넌트만 비교한다.
- 각각의 가상돔을 구분해주는 key값을 통해, 변경된 내용을 빠르게 탐지하고 반영한다.
- diffing 알고리즘의 원리는 ‘휴리스틱’을 통하여 빠르게 해결한다. 전체 DOM 트리를 탐색하고 비교하는 일반적인 알고리즘은 O(n^3)이지만 react는 O(n)으로 처리한다.
- 변경된 부분들을 알게 된다면 리엑트는 Batch Update를 통해, 실제 dom에 적용을 시킨다.
Virtual DOM(가상돔)에 대한 의문과 대답
가상돔 때문에 오히려 메모리를 더 잡아먹는게 아닐까..?
- React의 가상 DOM은 애플리케이션의 복잡성과 성능을 고려하여 설계된 기술로, 메모리 오버헤드는 대개 상대적으로 낮은 비용으로 간주된다. 가상 DOM을 사용함으로써 개발자는 성능 최적화와 유지보수의 이점을 누릴 수 있다
리엑트에서 직접 document.으로 접근하면 안좋은점
- 리액트는 컴포넌트 상태(State)가 변경될 때마다 가상 돔을 업데이트하고 이전 가상 돔과 비교하여 실제 DOM 업데이트를 최소화한다. 직접 DOM을 조작하면 리액트가 이 변경 사항을 감지하지 못하고 불필요한 DOM 업데이트가 발생할 수 있다.
- 직접 DOM 조작은 리액트의 컴포넌트 생명주기와 관리 방식을 무시하고 코드를 복잡하게 만들 수 있다.
- 직접 DOM 조작은 다른 브라우저와 호환성 문제를 일으키거나 보안 취약점을 발생시킬 수 있다.
리엑트의 이상적인 접근방식 useRef() 훅
- 리액트에서 태그에 접근하는 가장 이상적인 방법은 Refs를 사용하는 것이다. Refs는 리액트에서 DOM 요소 또는 컴포넌트 인스턴스에 직접 접근하기 위한 방법을 제공하며, 이를 통해 DOM 요소에 접근할 수 있다. 이는 리액트의 가상 DOM을 무시하지 않고 관리할 수 있다.
가상돔이 장점만 있을까?
- 가상 DOM을 사용하면 렌더링 성능을 최적화할 수 있지만, 초기 로딩 시에는 추가적인 오버헤드가 발생할 수있다. 가상 DOM의 초기 로딩 오버헤드는 주로 성능 최적화와 초기 로딩 속도 사이의 균형을 유지하는 문제이며, 프로젝트의 요구 사항과 사용자 기대치에 따라 이 문제를 다룰 때 선택을 해야 한다.
- 작은 규모의 애플리케이션에서는 가상 DOM의 장점이 오버헤드보다 큰 가치를 가질 수 있으며, 대규모 애플리케이션에서는 초기 로딩 속도에 민감하므로 최적화가 필요할 수 있다.
가상돔과 리엑트의 최적화.. 그리고 설계원칙에 대한 내생각
관심사에 따라서 코드를 분리하고 단일 책임을 가지는 컴포넌트를 만들어야 한다.
리엑트에서 많이 들은 설계원칙이다. 결국, 컴포넌트 분할을 통해 각 컴포넌트는 독립적으로 관리되고 최적화되며 이렇게 최적화된 컴포넌트는 가상 DOM이 변경 사항을 처리할 때 불필요한 연산을 최소화하고, 렌더링이 필요한 부분만 업데이트하도록 도와준다. 이러한 최적화는 애플리케이션의 성능을 향상시키고 더 빠른 UI 업데이트를 가능한다.
마무리
리엑트의 가상돔을 이해하고, 필요성을 안다고 하면, 좀 더 클린코드 맞게 작성할 수 있을 것 같다.
참고자료
https://hyebeen2658.tistory.com/14