리액트의 virtual dom이 real dom에 업데이트 되는 과정이 이렇더라고
1. 컴포넌트에 변화가 생기고 새로운 virtual dom을 생성
2. 기존의 virtual dom과 새로운 virtual dom을 비교하여, real dom에 반영할 최소 변경점 찾음
3. real dom에 반영
4. 기존 virtual dom에 새로운 virtual dom의 변경점 반영
여기서 1번 과정에서 새로운 virtual dom을 만들 때, root부터 시작해서 새로운 virtaul dom을 만드는 건가?
아니면 기존 virtual dom을 이용하여 만드는 건가?
내 생각엔 기존 virtual dom을 이용한다고 한다면... 2번 과정이 필요 없을거같음.
그러면 아예 새로운 virtual dom을 만드는거 같은데 맞나?
=> 1번 과정에서 새로운 virtual dom이라고 했는데, 리액트 내부에선 current, WIP(workingInProgress)라는 두개의 virtual dom을 유지한다고 하네.
그리고 dom의 변화는 wip에 먼저 반영되어 위의 2~4 과정이 이루어지고.
따라서 기존의 질문인... root부터 시작해서 새로운 virtual dom을 만드는건 아니다...!
기존 VDOM 복사한다고 함(current -> WIP). 그럼 의문이 드는 게 바로 조작하면 될 걸 왜 트리를 두개씩이나 써서 비교하냐는 것 일텐데, 이건 브라우저가 DOM 조작 할 때 reflow 내지는 repaint가 생기기 때문임. 이게 좀 비싼 작업이라서, 리액트 reconciler에서 트리 두개를 diffing하고 최소 업데이트를 한번 만에 적용하는거임.
나도 공부 중이라 틀린 부분 있을 수도 있음
감사. 계속 알아봤거든. 니 말대로 current, WIP 두 가상돔을 유지한 상태에서 dom 변경점들을 WIP에 반영하고 current와 WIP를 비교해서 최소 변경점을 real dom에 적용한 후에 current와 WIP의 싱크를 맞추니까.... 전체 virtual dom을 다시 만드는건 잘못된 생각이었다.