Virtual DOM과 함께 알아보는 Reconciliation

https://choq.tistory.com/59  : 근데 왜 index를 key 값으로 쓰면 안좋다는 거에요?

 

이전 글의 상위 개념에 대한 부분을 다루고자 한다.

 

---

 

React의 Reconciliation에 대한 이야기다.

 

 

영어 뜻은 '화해' 이다. 갑자기 화해? 라고 생각할 수 있지만....

[원래 의미는 불화 후 화해하는 것을 의미한다.  여기서 나아가 '하나의 마음으로 일관성 있게 만든다' 라는 의미로 진화했단다-https://www.etymonline.com/kr/word/reconciliation] 

....고로 다름을 찾아서 일치시킨다, 정도로 해석하면 될듯 하다. 

 

 

그래서  React에서의 Reconciliation이란,

이전과 비교해서 다른 점을 찾아내고, 일치하게 만들어 재렌더링하는 일련의 과정을 의미한다.

 

자 그럼 무슨 비교를 통해서 현상태와 다른 점을 찾아낼까? React에서는 VirtualDOM을 사용하니까 DOM과의 비교를 통해서 하겠지~? 

라고 VirtualDOM을 떠올렸다면 나름 멋쟁이. 하지만 비교 대상은 DOM이 아니다. WHAT?? 바로 또 다른 VDOM(VirtualDOM)이다.

 

VDOM은 다음의 두 상태로 존재 한다. Current 트리와 WorkinProgress 트리이다. 

전자는 DOM에 그려진것과 동일한 트리, 후자는 특정 이벤트에 의해 변화or렌더링 되고있는 트리를 의미한다. 이를  더블 버퍼링 구조 라고 한다. 더블 버퍼링은 A버퍼에서 연산이 일어나면 B 버퍼가 값을 보여주고, A버퍼에서 연산이 끝나면 A버퍼를 보여주면서 B버퍼를 그 다음 연산에 투입시키는 방식으로 작동한다.  WorkinProgress 트리에서 연산이 끝나고 트리가 그려지면 DOM에 적용되면서 이제 Current 트리가 된다. (신분상승!?) 그러면서 기존에 Current 트리였던 버퍼는 WorkinProgress 트리가 되어 다음 연산을 진행한다. 

이런 과정을 통해서 화면 깜빡임이 줄어들면서 부드럽게 표현된다. 다만 화면을 두개 그리기에 구조가 복잡하고 메모리 사용량이 증가하는 부분이 있다고는.. 하지만 이런 부분은 리엑트가 해줄것이다ㅎ우린 맘편히 코드만 짜면된다.

더블 버퍼링의 구조도, Buffer2로 IN시에 Buffer1이 유저에게 보여준다.

 

추가적으로 트리끼리 차이를 비교하는 방식은 비교 알고리즘(Diffing Algorithm)을 사용한다.

비교하는 트리의 루트부터 비교해가는 방식을 말한다.

엘리먼트가 다르다면 아예 새로운 트리를 그리고, 같다면 그 안에서 변경된 부분만 업데이트 해준다. 

이 비교하고 업데이트 해줄때 key값의 중요성이 빛을 발하는 것이고, 그러한 장점을 사용하기 위해 index사용을 지양해야하는 것이다.

 

 

 

 

 

[참고]

1. https://medium.com/@cksal4785911/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EA%B9%8C%EB%B3%B4%EC%9E%90-fbcc5b9c9e00

2. https://velog.io/@boyeon_jeong/VDOM