diffTrees 함수의 알고리즘 생각하다보니… 일단 새롭게 리렌더링 될때 만들어지는 VDOM을 생성해 놓고, 그 다음에 비교를 해야 하는데…?

전체 흐름 구상

• diffTrees를 통해 달라진 점만 찾아서 노드를 교체할 계획인데 그럴려면 실제 리렌더링시에 새롭게 만들어지는 가상 돔이 필요하다.
• 꼭 지켜야할 규칙! → 기존의 rootDOM을 기준으로 ‘하나의 노드’ 씩 그려나가야한다.

flowchart TD
  
  old1 --> old2
  old1 --> old3
  old3 --> old4
  old3 --> old5
  
   new1 --> new2
   new1 --> new3
   new3 --> new4
   new3 --> new5

• 위가 rootDOM이라고 하면 새롭게 만들어지는 가상 DOM은 이 돔을 기반으로 그려져야 한다.
• 만약 여기서 3에서 리렌더링이 발생하면 1부터 다시 그려질게 아니라 3의 노드 부터 그려져야한다.
• 그러면 어떻게 해야할까?
• 우선은 rootDOM으로 부터 리렌더링이 발생한 VNode를 리렌더링 함수에 입력을 한다.
  • 이렇게 되면 업데이트된 최신의 상태값은 유지가 된다.
• 하지만 하위(=4,5 번 노드)의 노드들은 새롭게 노드가 그려지므로 기존의 상태(=hookMetaData필드)가 유지되지 않은채 완전히 새로운 노드가 만들어져 버린다.

최선의 방법은 reRender 가 실행되는 순간에 각각의 Node에 접근해서 생성을 하는데 각 Node에 진입하는 순간에!!! (type 이 함수일 경우 함수를 호출 하기 전에!!)

• 기존의 rootVNode와 비교를 해주는 함수를 사용해 비교를 한뒤
• 동기화 작업이 필요하면 동기화를 해주는 synchronizeNode함수를 사용해 동기화를 시켜준다.
• 그러면 유지된 최신의 상태 필드를 얻는다.
• 업데이트된 Node를 바탕으로 함수 컴포넌트를 호출한다.
• 위의 과정을 재귀로 반복한다.

• 위의 흐름을 잘 살펴보면 지금 상황에서 필요한 함수가 두개 보인다.
  1. OldVNode와 NewVNode를 비교하는함수 (비교만 한다!!_역할 분리 집중)
  2. 데이터의 동기화가 필요한 상황에서(즉 1번 함수에서 동일하다고 판단이 된 상황) 노드의 데이터를 동기화 해주는 함수.

위의 함수를 만들고 흐름대로 구현을 완료했다면 이제는 올바르게 ‘가상 돔’을 만들 수 있다.

• 다음 단계로는 만들어진 VDOM과 실제 rootDOM을 비교해 실제로 바뀐 부분의 노드만 변경합니다.(DOM변경 최소화)

위의 작업의 전체 흐름은 다음과 같다.

우선은 첫번째 작업부터 진행 해보겠다.