Build your own react 학습 정리

Build your own react를 보며 공부한 내용을 정리해보았다.

Step I ~ Step V

render를 단순히 재귀적인 appendChild로 구현한다면 전체 DOM 트리가 그려지기 전까지 메인 스레드를 블로킹 하게 된다.
즉, workLoop를 만들어 계속 메인 스레드에 yield 하도록 만들어야 한다. workLoop는 requestIdleCallback을 통해 브라우저가 Idle 상태일 때 마다 재귀적으로 호출하도록 만든다. (비록 React v17 이후부턴 별개의 스케줄러 패키지를 사용하지만 이 부분은 개념적으로 동일하다고 한다.)
그리고 workLoop에서 처리하는 작업의 단위를 fiber라고 한다.
render가 호출되었을 땐 단순히 다음 수행할 fiber를 추가하고, workLoop에서 그 엘리먼트를 append하고, 해당 엘리먼트의 child 엘리먼트들의 fiber들을 재귀적으로 만들고, 그 fiber들이 다음으로 실행된다. 이 DOM 트리에 대해 생성되는 작업의 트리를 fiber tree 라고 한다.
이렇게 구현하면 workLoop를 비동기적으로 만들었기 때문에, 브라우저는 전체 DOM 트리가 만들어지기 전에 불완전한 UI를 렌더링 하려 할 것이다. 즉 fiber의 수행에서 appendChild를 호출해선 안 된다.
다음 수행할 fiber가 없을 때 까지 기다렸다가, 한 번에 커밋해 DOM 트리를 그려서 해결.

마지막으로 커밋된 fiber DOM 트리와 render의 인자로 들어온 컴포넌트를 비교해 삭제, 변경된 경우에 적절하게 반영해야 한다.
즉 각각의 fiber는 마지막으로 커밋되었을 때의 복사본 (alternate)을 가져야 한다.
그리고 fiber를 수행할 때 마다 Reconciliation 한다.
old fiber (alternate)와 인자로 넘어온 엘리먼트의 타입을 비교해 같은 경우 노드를 업데이트하고, 다른 경우 새 fiber를 만들고 기존의 fiber는 지운다. (단순하게 엘리먼트의 타입을 비교해 판단한다는 얘기)