리액트는 일반적인 DOM이 아닌 Virtual DOM 이라는 녀석을 사용한다.
Virtual DOM을 설명하기 앞서 먼저 DOM에대해 알아보자
DOM이란?
Document Object Model의 준말로, 객체들로 문서 구조를 표현하는 방법이다.
대표적인 예시로 HTML이 있다.
DOM의 한가지 문제점은 동적 UI에 최적화되어 있지 않다는 점이다.
HTML은 자체적으로 정적이어서 js를 이용해 이를 동적으로 만드는데,
프로젝트 규모가 커지면 DOM에 직접 접근하여 변화를 주게되는 순간 성능 이슈가 발생한다.
따라서 리액트는 DOM 업데이트를 추상화 하여 처리횟수를 줄이는 Virtual DOM 방식을 사용한다.
Virtual DOM
Virtual DOM은 실제 DOM을 추상화한 js객체를 구성한다. 마치 실제 DOM의 가벼운 사본과 비슷.
리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트 할 떄는 아래 세 가지 절차를 밟는다.
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.
참고
'etc > 리액트를 다루는 기술' 카테고리의 다른 글
| [React] 리액트 개요 및 특징 (0) | 2021.07.23 |
|---|