React

목차
virtual DOM에 대해서 아나요? 🌊🌊
: Virtual DOM은 DOM을 직접 조작하지 않고 변경사항을 하나의 가상 돔에 모았다가 DOM에 한 번에 보내는 기술

실제 DOM과 같은 내용을 담고 있는 복사본(실제 DOM이 아닌 JS 객체 형태로 메모리 안에 저장되어 있음)
Virtual DOM은 실제 DOM의 복사본이기 때문에, 실제 DOM의 모든 element과 속성을 공유
브라우저에 있는 문서에 직접적으로 접근할 수 없음 → 화면에 보여지는 내용을 직접 수정할 수 없음
리액트는 state가 변경될 때마다 리렌더링 발생 → 이때마다 새로운 내용이 담긴 가상돔을 생성함
진행 순서 : 데이터 변경 → 가상 DOM 리렌더링 → 이전 가상 DOM과 비교 → 변경된 부분 실제 DOM에 적용
- Diffing : 렌더링 이전에 화면의 내용을 담고있는 첫번째 가상돔과 업데이트 이후에 발생할 두번째 가상돔을 비교해 정확히 어떤 Element가 변했는지를 비교
- Reconciliation(재조정) : Diffing은 효율적인 알고리즘을 사용해 진행되기 때문에 어떤 Element에 차이가 있는지를 매우 신속하게 파악 → 차이가 발생한 부분만을 (브라우저상의) 실제 DOM에 적용

**virtual DOM 사용시 무조건적으로 빠르다고 생각할수도 있지만 그렇지 않음

Virtual DOM 사용은 virtual DOM을 먼저 조작 후 DOM을 조작하기 때문에 DOM만 조작하는 것보다 느림
하지만 DOM의 조작이 빈번하게 일어나는 경우 → virtual DOM을 이용하여 업데이트를 모아서 한번에 DOM에 보내는게 효율적임
virtual DOM과 DOM 비교

DOM	virtual DOM
1. DOM에 변경이 일어남(data의 update) 2. DOM Tree가 다시 만들어짐 3. Render Tree도 다시 만들어짐 4. 레이아웃-페인트-합성	1. Virtual DOM에서 Real DOM의 스냅샷을 찍어 놓음 2. DOM에 변경이 일어남 3. 실제로 브라우저가 관리하는 Real DOM과 리액트가 메모리상에서 관리하는 Virtual DOM을 shallow comparison(얕은 비교)하여 변경된 부분이 있나 관찰 4. 변경된 부분이 있으면 Real DOM에서 바꾸어 줌
10개의 list 중 하나의 list만 변경이 있어도 10개 list 전체를 Reload 해야 됨	10개의 list 중 하나의 list만 변경이 있으면 그 한가지 아이템만 dom에서 바꿔줌 Reload가 딱 한번만 일어남. (대신 규모가 크다)
비용이 큰 작업	부하가 걸리지 않고, (상대적으로) 비용이 적게 듬
-	Real DOM의 가벼운 사본이며, Virtual DOM은 메모리에 존재함

TTL(Time to Interactive) : 페이지가 사용자가 입력을 받을 준비가 된 때(초 단위 - 낮을수록 좋음)

출처

React | virtual DOM