Virtual DOM(가상돔)
- React는 가상 DOM을 사용해서 우리가 원하는 페이지를 빠르게 브라우저에 그려줌
- 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하기
- 이 복사본은 실제 DOM이 아닌 JavaScript의 객체형태로 메모리 안에 저장되어있음
- 실제 DOM 안에 있는 모든 element들과 속성들을 그대로 가지고 있지만,
실제 DOM과는 다르게 브라우저에 있는 문서에 직접적으로 접근할 수 없음 - 따라서 화면에 보여지는 내용을 직접 수정할 수도 없음
- React는 가상 DOM을 활용하여 실제 DOM을 조작하는데 걸리는 시간을 획기적으로 줄여줌
DOM (Document Object Model)
- 브라우저를 통해 웹사이트에 접속하면 들어가면 사진, 버튼 등 여러 요소들이 있음(element)
- 이 모든 요소들을 담고있는 것을 문서(document)라고 함
- 브라우저는 페이지에 해당하는 html을 분석해서 화면에 띄워줌
- DOM이란 웹페이지에 들어가있는 html element들을 트리형태의 구조로 표현한 것임
-
DOM 트리 안에는 각각의 element에 상응하는 node가 들어있음
-
개발자들은 이 DOM이 제공하는 API를 통해 DOM 구조에 접근을 하고, 원하는 element의 구조, 내용, 스타일 등을 변경할 수 있음 -> DOM 조작 행위
-
만약 JavaScript를 사용한다면 getElementById(), querySelector() 같은 API를 통해서 DOM 구조 안에 있는 element에 접근해서 원하는대로 내용, 스타일, 레이아웃 등을 수정할 수 있음
실제 DOM 조작
- 만약 title color를 수정하고 싶다면 아래와 같은 코드로 DOM을 조작할 수 있음
document.querySelector('#title').style.color = 'red';조작과정
- 브라우저가 현재 페이지의 html을 탐색해서 해당 element를 찾음
- 해당 element와 자녀 element들을 DOM에서 제거함
- 새롭게 수정된 element들로 교체함
- 레이아웃 정보 수정
- 새롭게 계산된 내용에 따라 브라우저에 다시 그려줌
-
DOM은 트리구조로 되어있기 때문에 트리에 있는 정보를 업데이트 시켜주는 것을 그렇게 무거운 작업은 아님
-
빠른 알고리즘을 사용해서 트리를 효율적으로 업데이트 시켜줄 수도 있음
-
하지만 매번 DOM을 조작할때마다 브라우저 화면의 UI를 새롭게 그려주는 작업은 복잡하고 시간이 걸리는 작업임 -> 비효율적 -> 가상 DOM을 활용하면 됨
-
가상 DOM은 단지 JavaScript의 객체에 불과하기 때문에 가상 DOM을 생성하고 접근하는 것은 가볍고 빠른 작업임
-
React는 항상 두개의 가상 DOM 객체를 가지고 있음
-
첫 번째 가상 DOM : 렌더링 이전의 화면 구조를 담은 객체
-
두 번째 가상 DOM : 렌더링 이후에 보이게될 화면 구조를 담은 객체
-
React는 state가 변경될 때마다 화면이 새로 렌더링 됨
-
렌더링 발생될 상황에 놓일때마다 새로운 화면에 들어갈 내용이 담긴 가상 DOM을 생성함 (실제 브라우저에 그려지기 전에)
-
그 다음 렌더링 이전 화면 구조를 담고 있는 첫 번째 가상 DOM과 업데이트 이후의 내용을 담고 있는 두 번째 가상 DOM을 비교해서 정확히 어느 element들이 변했는지 찾아냄
-
이러한 과정을 Diffing(디핑)이라고 부름
-
Diffing은 효율적인 알고리즘을 사용해서 진행되기 때문에 정확히 어느 element들이 변경되었는지 굉장히 빠르게 파악할 수 있음
-
파악 후 딱 바뀐 element들만 실제 DOM에 적용시켜 줌 -> Reconciliation(리콘실리에이션 = 재조정)
-
재조정과정이 효율적인 이유는 "Batch Update" 덕분임
-
Batch Update : 변경된 모든 element들을 집단으로 실제 DOM에 한번에 적용시켜주는 것
-
만약 list안에 10개의 항목이 바뀌었다면 실제 DOM을 10번 반복해서 조작하는 것이 아닌, 한번에 바뀐 모든 부분들을 집단으로 적용시켜 줌 -> 훨씬 더 빠르고 효율적임
정리
-
React의 가상 DOM은 실제 DOM과 같은 내용을 담고 있는 복사본임
그리고 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어있음 -
React는 항상 두 개의 가상 DOM을 갖고 있음
첫 번째 가상 DOM은 변경 이전의 내용을 담고 있고,
두 번째 가상 DOM은 변경 이후에 보여질 내용을 담고 있음 -
변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에
리액트는 두 개의 가상 DOM을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악함
그리고 이러한 과정을 Diffing이라고 부름 -
Diffing을 통해서 변경된 부분을 파악한 이후에,
React는 Batch Upadate를 수행함으로 실제 DOM에 한번에 적용시켜줌
그리고 이러한 과정을 Reconsiliation(재조정)이라고 함
