웹 프론트엔드에서 javascript를 사용하려면 DOM을 알아야한다.
DOM이란?
Document Object Model의 약자이며, 영어 뜻풀이 그대로 문서 객체 모델을 의미한다.
웹페이지에 들어있는 HTML의 요소(Element)들을 트리 형태로 표현한 것이다. (DOM 트리는 각각의 노드가 들어있음)
웹페이지에서 javascript로 요소들을 제어할 때 사용한다.
(예시. getElementById("title");는 아이디를 사용해 요소를 가져와라)
돔조작
웹페이지에 있어 돔조작은 없어서는 안되는 필수적인 과정이다.
간단한 웹페이지를 만들어도 게시물과 댓글 추가 및 삭제, 좋아요를 누르는 것처럼 간단한 것을 하더라도 화면에 보여지는 내용을 바꾸기 위해서는 DOM을 조작해야 한다.
개발자들은 DOM이 제공하는 API를 통해 DOM 구조에 접근한다. 그리고 엘리먼트의 구조, CSS를 원하는대로 변경한다.
만약 javascript를 사용한다면 getElementById()나 querySelector() 같은 API를 통해서 DOM 구조 안에 있는 요소(Element)들에 접근하여 원하는대로 스타일, 레이아웃 등을 수정할 수 있는 것이다.
그렇다면 왜 굳이 가상돔을 사용할까?
- react는 가상돔을 똑똑하게 사용해서 실제돔을 조작하는데 걸리는 시간을 획기적으로 줄여준다.
- 돔은 트리구조로 되어있어는데 가상돔은 빠른 알고리즘을 사용하면 트리를 효율적으로 업데이트 시켜줄 수 있어 무거운 작업이 아니기 때문에 사용한다.(API가 없어서 가벼움)
돔을 매번 조작할 때마다 브라우저 화면에 UI를 새롭게 그리는 작업은 꽤나 복잡하고 시간이 걸리는 작업이다.
만약 브라우저에 10개의 리스트가 있다고 가정했을 때, 리스트를 각각 변경해야한다면 이 과정은 10번을 반복해서 화면에 다시 그려줘야 하는데 굉장히 비효율적이다.
그래서 리액는 가상돔을 활용해 비효율적인 돔조작을 훨씬 빠르게 만들어준다.
[돔을 수정되는 과정]
1. 브라우저가 현재 페이지의 HTML을 탐색
2. 수정된 엘리먼트를 찾고, 해당 엘리먼트와 자녀 엘리먼트를 돔에서 제거
3. 새롭게 수정된 엘리먼트들로 교체
4. CSS, 레이아웃 정보를 알맞게 수정
5. 새롭게 변경된 내용을 브라우저에 렌더링한다.
Virtual DOM(가상돔)
react는 가상돔을 사용해 실제돔이 조작하는 것을 빠르게 만들어준다.
가상돔은 실제돔을 담고 있는 복사본이라고 생각하면 된다.(Virtual DOM = DOM) 복사본은 실제돔이 아닌 자바스크립트 객체 형태로 메모리안에 저장되어 있다. 하지만 가상돔은 실제돔과 다르게 브라우저에 있는 문서에 직접적인 영향을 주지 못한다.
직접적으로 화면에 보이는 UI를 조작할수 있게 해주는 API를 제공하지 않기 때문에 화면에 보여지는 내용을 직접 수정할 수 없다.
가상돔은 메모리에 저장되어있는 자바스크립트 객체에 불과하다 그래서 생성, 접근하는것이 가볍고 빠른 작업이다.
그렇다면 가상돔으로 어떻게 실제돔을 효율적으로 조작할까?
리액트는 항상 2개의 가상돔 객체를 갖고 있다.
렌더링 이전 VS 렌더링 이후
리액트는 화면이 변경될 때마다 화면이 렌더링된다.
리액트는 렌더링이 발생될 상황에 놓일때마다 실제 브라우저에 그려지기 이전에 새로운 화면에 담길 가상돔을 생성한다.
그리고 렌더링 이전의 가상돔과 렌더링 이후의 가상돔을 비교해서 어느 엘리먼트가 변경됏는지 찾아낸다. 이 과정을 Diffing라고 하며, Diffig은 효율적인 알고리즘이라 정확히 어느 부분이 변경됐는지 빠르게 파악할 수 있다.
그다음 빠르게 엘리먼트들을 파악하고 변경된 부분만 실제돔에 적용시킨다. 이 과정을 Reconciliation(재조정)이라고 부른다.
리액트의 Reconciliation(재조정)이 효율적인 이유는 Batch Update 덕분이다.
Batch Update는 변경된 요소들 하나하나씩이 아닌 Batch의 뜻인 집단, 무리처럼 변경된 엘리먼트들을 실제돔에 한번에 적용시켜준다.
돔 조작에 있어서 가장 비용이 많이 드는것은 화면에 그리는 것인데 Batch Update는 변경된 엘리먼트만 실제돔에 한꺼번에 적용시키기 때문에 훨씬더 빠르고 효율적인것이다.
정리
-
React의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본이다.
-
React는 항상 두 개의 가상돔이 있다.
첫 번째 가상돔은 변경 이전의 내용을 담고 있고,
두 번째 가상돔은 변경 이후의 보여질 내용을 담고 있다. -
Diffing을 한다.
Diffing이란? 변경된 내용으로 렌더링 되기 이전(= 실제 DOM으로 변경되기 이전)에 React가 두 개의 가상돔을 비교하여 어떤 부분이 바뀌었는지 비교하여 파악하는 과정을 말한다. -
Reconsiliation(재조정)을 한다.
Reconsiliation(재조정)이란? Diffing을 통해서 변경된 부분들을 파악하고, 이후 React는 Batch Update를 수행함으로 실제 DOM에 변경된 내용들을 한 번에 적용시키는 과정을 말한다.
참고강의 : https://www.youtube.com/watch?v=gc-kXt0tjTM
