DOM (Document Object Model)
- HTML 파일 내용을 토대로 만들어지고, javascript 와 같은 스크립팅 언어로 수정할 수 있도록 만들어진 웹 페이지의 객체 지향 표현
- 브라우저가 화면을 그리기 위해서 필요한 정보가 트리 형태로 저장된 데이터입니다.
- DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.
- DOM 은 DOM이 제공하는 API(getElementById, querySelector) 를 사용해 , 원하는 엘리먼트에 스타일, 구조 등을 조작할 수 있다.
- 웹 페이지는 일종의 문서(document) 로 이루어져있다. 이 문서는 웹 브라우저를 통해 문서가 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다.
가상 돔 (Virtual DOM)
- React 의 가상 돔은 실제 DOM과 같은 내용을 담고 있는 복사본
이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어있다.
- React 는 항상 두개의 가상돔을 갖고 있다.
첫 번째 가상돔 : 변경 이전의 내용을 담고 있음
두 번째 가상돔 : 변경 이후에 보여질 내용을 담고 있음
변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에 리액트는 두 개의 가상돔을 비교해서 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악한다. 이러한 과정을 Diffing 이라고한다.
가상 돔 (Virtual DOM) 의 존재 이유
- 실제 DOM 에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁다
- React 는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리한다.
가상돔을 활용한 DOM 조작 과정
가상돔은 실제 DOM 과 다르게 DOM 을 조작하는 API 를 갖고 있지 않다.
- 리액트는 state가 변경될 때마다 새로 렌더링이 발생하는데, 리액트는 새로운 렌더링이 발생할 때마다 새로운 화면에 들어갈 내용이 담긴 가상 돔을 생성한다.
- 렌더링 이전 화면 구조를 나타내는 가상돔 (첫 번째 가상돔) 과 새로 생긴 가상돔 (두 번째 가상돔) 을 비교해서, 정확히 어디 엘리먼트가 바뀌었는지 파악한 다음 변경 된 부분만 실제 DOM 에 적용한다. 이러한 과정을 Reconciliation (재조정) 이라고 함.
React 의 재조정 과정 (Reconciliation)
- Batch Update 과정은 집단 업데이트 라는 의미인데, 변경 된 엘리먼트를 한번에 바뀐 모든 부분을 적용시킨다.
( 변경 된 모든 부분을 받아와서, 바로 적용시켜주기 때문에 비용절감에 효율적이다. )
'React > 이론공부' 카테고리의 다른 글
| React forwardRef (1) | 2023.01.25 |
|---|---|
| React.Fragment (0) | 2023.01.25 |
| React.memo (0) | 2023.01.25 |
| [React Hooks] useReducer (0) | 2023.01.25 |
| [React Hooks] useCallback (0) | 2023.01.25 |
