Fiber 가 렌더링을 쪼갤 수 있는 이유 — 콜 스택 대신 세 포인터

노드마다 child(첫 자식), sibling(다음 형제), return(부모) 세 링크가 걸려 있다. App 의 child 는 Header, Header 의 sibling 은 Main, Main 의 child 는 List, 각자의 return 은 부모다. 규칙은 넷: child 가 있으면 내려가고, root 에 도달하면 끝내고, sibling 이 없으면 return 으로 올라가며 반복하고, sibling 이 있으면 옆으로 간다. 내려가는 길이 beginWork, 올라오는 길이 completeWork 라 한 노드를 두 번 지난다. 순서: begin App → begin Header → complete Header → begin Main → begin List → complete List → complete Main → complete App.

재귀로 순회하면 어디까지 했는지가 JS 콜 스택의 프레임(App → Main → List)에 쌓여 있어, 도중에 양보하려고 함수를 빠져나오면 그 프레임이 풀려나간다. 세 포인터로 순회하면 진행 상태가 workInProgress 포인터 하나로 줄어든다 — 노드마다 걸린 링크를 직접 따라가므로 호출 스택이 필요 없고, 멈추면 그 포인터만 남아 거기서 다시 시작한다.

#react#fiber#algorithm#dfs
#560