react/in-depth-react-reconciler_2/

[utterances-bot]

React 톺아보기 - 05. Reconciler_2 | Deep Dive Magic Code

모든 설명은 v16.12.0 버전 함수형 컴포넌트와 브라우저 환경을 기준으로 합니다. 버전에 따라 코드는 변경될 수 있으며 클래스 컴포넌트는 설명에서 제외됨을 알려 드립니다. 6. Render phase Render phase는 변경된 상태 값을 반영한 workInProgress 트리 구축 과정을 일컫습니다. Host root부터 업데이

https://goidle.github.io/react/in-depth-react-reconciler_2/

[Gi-Youn-Oh]

오늘 질문이 많아 죄송합니다 ㅠ 찾아볼수록 헷갈려서 질문드립니다. 만약 기존 current tree 와 workInProgress tree 가 있고 workInProgress tree가 업데이트가 완료되어 새로운 new current tree가 되었다고 가정하면, 다시 업데이트 가 필요할때 기존의 current tree는 버려지고 새롭게 참조 복사하여 new workInProgress tree를 생성하나요 아니면 기존의 current tree를 재활용하여 바뀐부분만 업데이트 조정해주나요? 만약 버리고 생성한다면 기존 것을 재활용하는 것보다 효율적이라고 할 수 있나요?🥲

[goidle]

@Gi-Youn-Oh 상태 변경이 발생하면 current tree를 기준으로 업데이트를 적용해야 할 node(fiber) 만을 찾아서 작업용 노드(workInProgress)를 만듭니다. 이 과정을 재조정 작업이라고 부르고, 작업용 노드를 생성할 때 current node의 alternate로 이미 노드가 생성되어 있다면 해당 노드를 재사용하기 위해 필요한 부분만 초기화를 하여 사용합니다.

이 내용은 prepareFreshStack이나 reconciler_2 이후 포스트에서 다루었고 코드는 createWorkInProgress에서 확인할 수 있습니다.

노드 재사용과 관련한 중요한 내용은 뒤에 있는 포스트에서 자세히 확인할 수 있으니 질문에 답변이 될 것 같습니다.