React 심화

Virtual DOM

• 말 그대로 리액트에서의 가상 DOM을 지칭하는 용어.
• 리액트는 '실제 DOM'과 그의 사본 격인 '가상 DOM'으로 구성되어 있다.
• 버추얼 돔은 원본 돔 보다는 훨씬 가볍다.
• 목적 : 불필요한 자원 및 시간 낭비를 없애고, 효율적이고 경제적이며 신속하게 브라우저를 구동시키기 위해 존재한다.
• 리액트 구동원리 :

새로운 UI가 추가/수정 -> 버추얼 돔에서 수정되거나 바뀐 트리 및 상태를 캐치 -> 최적의 효율적인 방법으로 실제 돔의 상태를 변경할 방법을 버추얼 돔에서 모색 -> 최소한의 작업으로 바뀐 부분만 부분적으로 리렌더링 -> 실제 돔에서 한꺼번에 업데이트

출처 : 코드스테이츠

 

 

비교 알고리즘(Diffing Algorithm)

• 리액트에서 사용하는 알고리즘
• 리액트에서는 다음 2가지의 가정 하에 시간 복잡도 O(n)의 휴리스틱 알고리즘을 구현한다 :
  1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
  2. 개발자가 제공하는 key 프로퍼티를 가지고, 여러 번 렌더링을 거쳐도 변경되지 말아야 하는 자식 요소가 무엇인지 알아낼 수 있을 것이다.
• 원본 돔과 버추얼 돔 비교 시 탐색 방법 : 너비 우선 탐색(BFS).
  즉, 같은 항렬의 트리를 우선 비교 후, 그 아래의 자식 트리들을 비교해 나가는 방식인 셈.

출처 : 코드스테이츠

 

그런데, 탐색 중 조건은 2개로 나뉠 수가 있다 :

• DOM 엘리먼트가 다른 타입일 경우
• DOM 엘리먼트가 같은 타입일 경우

 

이에 대해 자세히 살펴보도록 하자.

 

DOM 엘리먼트가 다른 타입일 경우

• 엘리먼트의 타입이 다르면, React는 이전 트리를 버리고 완전히 새로운 트리를 구축한다.
  다음은 그 예시이다 :
  • <a> → <img>
  • <Article> → <Comment>
  • <Button> → <div>
• 트리를 버릴 때 이전 DOM 노드들은 모두 파괴된다.
• 이 때, 해당 엘리먼트의 자식 엘리먼트로 컴포넌트가 있을 경우, 컴포넌트의 state도 모두 파괴된다.

 

DOM 엘리먼트가 같은 타입일 경우

• 리액트는 기존 DOM과 비교하여 변경된 요소만을 수정한다.

 

---

Reference

https://ko.reactjs.org/docs/reconciliation.html

재조정 (Reconciliation) – React