리액트는 virtualDOM을 사용하여 콘텐츠를 렌더링합니다. DOM은 페이지의 HTML 구조를 추상화한 것입니다.
DOM Node들은 위 과정을 통해서 만들어집니다. 네트워크를 통해서 HTML 문서를 불러오고 raw byte를 characterize하는 과정을 거칩니다. 그리고 characterize화 후에 tokenize 해줍니다. 그리고 이 친구들을 Node들로 바꿉니다. 이 Node를 기반으로 DOM Tree를 생성해줍니다. 결국 DOM은 HTML로부터 온 것입니다.
HTML을 파싱하여 각각의 노드들을 트리 구조의 객체 형태로 래핑합니다. 이는 개발자가 DOM 노드들을 추가, 수정, 삭제할 수 있도록 API를 제공해줍니다. DOM 자체는 정적(static) UI를 위한 것이므로 DOM이 업데이트될 때 노드와 해당 CSS 및 레이아웃으로 전체 페이지를 업데이트해야 합니다.
DOM은 데이터에 변경이 있을 때마다 다시 렌더링하며 두 가지 방법으로 데이터를 확인합니다.
1. Dirty Checking: 모든 노드의 데이터를 일정한 간격으로 검사하여 변경사항이 있는지 확인합니다. Dirty Checking은 데이터가 최신 상태인지를 검사하기 위해 모든 노드를 재귀적으로 순회해야 하므로 최적의 솔루션이 아닙니다.
2. Observable: 모든 컴포넌트는 업데이트가 발생하는 시점을 수신할 책임이 있습니다. 데이터는 컴포넌트 상태에 저장되므로 변경 사항을 수신하고 변경 사항이 있으면 업데이트하기만 하면 됩니다.
리액트는 Observable을 사용하는 반면 Dirty Checking은 Angular.js에서 사용됩니다. 리액트는 virtual DOM을 사용하며 렌더링마다 새로운 virtual DOM을 생성합니다.
DOM updates in React
- 첫번째 렌더링에서는 virtualDOM과 실제 DOM 트리가 모두 생성됩니다.
- 리액트는 Observable Pattern에서 작동하므로 상태가 변경될 때마다 virtual DOM의 노드를 업데이트합니다.
- 그런 다음 리액트는 가상 DOM과 실제 DOM을 비교하고 변경 사항을 업데이트합니다. 이 과정을 재조정이라고 합니다.
- 재조정을 위해 Dirty Checking 알고리즘(Diffing Algorithm)을 사용하지만 실제 DOM 노드의 데이터 대신 가상 DOM의 변경 사항을 확인합니다.
Reference
Explain dirty checks in React.js - GeeksforGeeks
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
www.geeksforgeeks.org
virtual dom이 뭐가 좋은가? (feat.React fiber)
도대체 virtual dom이 real dom보다 왜 성능이 더 좋은거지? 이 말은 사실일까? 'virtual dom'의 어떤 부분이 real dom을 사용하는 것보다 성능을 더 좋게 만드는 것일까?
velog.io
'Frontend' 카테고리의 다른 글
| [번역] Widget Driven Development (0) | 2023.03.11 |
|---|---|
| Why is React's concept of Virtual DOM said to be more performant than dirty model checking? (0) | 2023.03.03 |
| 프론트엔드에서 상태란? (0) | 2023.01.20 |
| Automatic batching for fewer renders in React 18 (0) | 2022.11.30 |
| Next.js 환경 변수 (0) | 2022.08.11 |
