virtual-dom-and-reconciliation.md

💡 리액트는 가상돔(Virtual DOM)을 사용해 보다 효율적으로 우리가 원하는 페이지를 브라우저에 빠르게 그려준다

Virtual DOM (가상 돔)

• 실제 DOM과 같은 내용을 담고 있는 복사본 ( JS 객체 형태로 메모리안에 저장 )

• 실제 DOM과 다르게 브라우저 화면의 UI를 직접 조작할 수 없음

• 변화 한 부분만 브라우저에게 알려 실제 DOM에 적용

// 전
<div>
	<h1>제목</h1>
</div>

// 후
<div>
	<h1>제목</h1>
	<p>내용</p>
</div>

⇒ p태그가 추가되었다면 브라우저에게 <div>, <h1>, <p>를 모두 전달하는 것이 아니라 <p>의 변화를 알려 <p>만 DOM에 추가

왜 Virtual DOM을 사용할까?

사실 DOM은 트리구조이기 때문에 알고리즘을 사용하면 DOM안의 정보를 조작하는 건 그다지 무거운 작업이 아님

그러나 매번 DOM을 조작할때마다 브라우저 화면의 UI를 새롭게 그려주는 작업(리플로우, 리페인트)은 오래 걸리고 이는 성능에 악영향을 줌

이에 가상돔을 사용하여 변화된 부분만 DOM에 업데이트 시켜 그려줌

⇒ 사용자가 느끼기에 빠르고 사용 경험이 좋음

Reconciliation(재조정)

리엑트는 항상 두개의 가상돔 객체를 가지고 있음

• 렌더링 이전 화면 구조를 나타내는 가상돔
• 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔
  

1. 리렌더링이 발생할 때마다 새로운 내용이 담긴 가상돔을 생성 ( 실제 브라우저에 그려지기 이전 )

2. 렌더링 이전 내용을 담고있는 첫번째 가상돔과 업데이트 이후의 두번째 가상돔을 비교

• 정확히 어떤 Element가 변했는지를 비교
• 이 과정을 Diffing라고 함

3. Diffing을 통해 변경된 부분들을 파악한 이후, Batch Update를 수행함으로 실제 DOM에 한번에 적용

⇒ 해당 과정을 통틀어 Reconciliation(재조정)이라고 함

Diffing Algorithm

• 루트나 부모 요소에서 변경이 발생하면 React는 모든 자식 요소를 변경된 것으로 간주하여 재조정 프로세스를 시작

• 자식들을 재귀적으로 처리할 때(li) 각 요소에 대한 수정, 추가 또는 삭제를 신중하게 분석함 이때 key를 사용하기 때문에 성능향상을 위해 key 사용을 권장

Batch Update

컴포넌트가 여러 번 업데이트 되더라도 실제 DOM 요소에 접근하는 것을 최소화하여 성능을 최적화 하는 기능

변경된 모든 Element들을 집단화 시켜 이를 한번에 DOM에 적용

Ex) 리스트안에 10개의 항목이 바뀌었다면 실제 DOM을 10번 반복해 수정하는 것이 아닌, 한 번에 집단화시켜 이를 적용