React-style Reconciliation 요약

1. 전체 흐름

단계	Render Phase (`renderFiberNode`)	Commit Phase (`commitFiberNode`)	결과
DOM 준비	Fiber 트리를 순회하며 Text/Host DOM 생성만 수행 (부모에 삽입하지 않음)	effectTag(PLACEMENT/UPDATE/DELETION)에 따라 실제 DOM 삽입/재배치/제거	React `completeWork` + `commitMutationEffects`와 동일
순서 결정	Fiber child/sibling 링크만 구성	`getHostSibling`으로 다음 형제 DOM 찾은 뒤 `insertBefore`	DOM 순서 안정
속성/스타일	설정하지 않음	`dom.updateAttributes` / `dom.updateStyles`가 diff를 계산해 Insert/Update/Delete 수행	React `commitUpdate`와 동일
텍스트	Text node 생성만	`handleVNodeTextProperty`가 최종 텍스트 커밋	Text-only VNode 처리

1-1. 단계별 다이어그램 (Mermaid)

flowchart LR
  A["VNode 입력<br/>(prev / next)"]
  B["Render Phase<br/>(renderFiberNode)"]
  C["DOM 생성/재사용만<br/>(삽입 X, attrs X)"]
  D["effectTag 결정<br/>(PLACEMENT / UPDATE / DELETION)"]
  E["Commit Phase<br/>(commitFiberNode / commitFiberTree)"]
  F["CL: effectTag === PLACEMENT?<br/>→ getHostSibling & insertBefore"]
  G["속성/스타일 diff & 커밋<br/>(dom.updateAttributes / updateStyles)"]
  H["텍스트 처리<br/>(handleVNodeTextProperty)"]
  I["최종 DOM 반영 완료"]

  A --> B --> C --> D --> E --> F --> G --> H --> I

1-2. VNode 비교/ID 전파 흐름

flowchart LR
  subgraph Prev_Render
    P1["VNode_prev (sid/key)"] -->|metaDomElement| P2[DOM_prev]
  end
  subgraph Next_Render
    N1[VNode_next] -->|transferVNodeIdFromPrev| N2["VNode_next + sid"]
    N2 -->|generateVNodeIdIfNeeded fallback| N3["VNode_next stable ID"]
  end
  P2 -. reused DOM .-> N3
  N3 -->|fiber.domElement| RenderPhase
  RenderPhase -->|effectTag| CommitPhase

transferVNodeIdFromPrev: 이전 VNode의 sid/key를 새 VNode로 복사해 동일 개체임을 표시.
generateVNodeIdIfNeeded: sid/key가 없으면 컴포넌트(stype) → ComponentManager, 일반 Host → tag-index 기반 auto ID 생성 (DOM에는 노출되지 않음).
fiber.domElement가 prev DOM을 가리키게 되어 Commit Phase에서도 같은 DOM을 재사용할 수 있음.

2. Render Phase 상세

if (prevVNode?.meta?.domElement) {
  domElement = prevVNode.meta.domElement;
} else if (vnode.tag === '#text') {
  domElement = document.createTextNode(vnode.text);
} else if (vnode.tag) {
  domElement = dom.createSimpleElement(vnode.tag);
  if (vnode.sid && !isAutoGeneratedSid(vnode)) {
    dom.setAttribute(domElement, 'data-bc-sid', vnode.sid);
  }
  if (vnode.attrs) {
    for (const [key, value] of Object.entries(vnode.attrs)) {
      dom.setAttribute(domElement, key, String(value));
    }
  }
}
vnode.meta.domElement = domElement;
fiber.domElement = domElement;

DOM 생성 후 vnode.meta.domElement/fiber.domElement에 저장.
부모에 삽입하거나 속성을 diff하지 않음.
Portal도 별도 FiberScheduler로 동일 흐름 수행.

3. Commit Phase 상세

if (fiber.effectTag === 'PLACEMENT') {
  const parent = fiber.parentFiber?.domElement ?? fiber.parent;
  let before = getHostSibling(fiber);
  if (before && before.parentNode !== parent) before = null;
  parent.insertBefore(domElement, before);
}

if (domElement instanceof HTMLElement) {
  dom.updateAttributes(domElement, prevVNode?.attrs, vnode.attrs);
  dom.updateStyles(domElement, prevVNode?.style, vnode.style);
}

if (domElement instanceof HTMLElement && vnode.text && !vnode.children) {
  handleVNodeTextProperty(domElement, vnode, prevVNode);
}

삽입: Render Phase에서 준비된 DOM을 commit 시점에만 insertBefore.
속성/스타일: React와 동일하게 diff → 부족분 삭제, 새 값 적용.
Deletion: prevVNode.meta.domElement 기반으로 DOM 제거 + component unmount.

4. `getHostSibling` (React 알고리즘)

let sibling = fiber.sibling;
while (sibling) {
  if (sibling.domElement) return sibling.domElement;
  if (sibling.child) {
    let child = sibling.child;
    while (child) {
      if (child.domElement) return child.domElement;
      child = child.child;
    }
  }
  sibling = sibling.sibling;
}
return null;

Render Phase에서 domElement를 미리 세팅했기 때문에 commit에서 바로 reference node 확보 가능.
reference node가 부모의 child가 아니면 null로 강등 → React와 동일한 append 동작.

5. 속성/스타일 Insert / Update / Delete

`dom.updateAttributes`

Prev attrs에 있지만 next attrs에 없는 키 → removeAttributeWithNamespace로 삭제.
next 값이 undefined/null → 삭제로 간주.
나머지는 namespace-aware setAttributeWithNamespace 호출.

`dom.updateStyles`

Prev 스타일에 있지만 next에 없는 키 → style.removeProperty.
next 값이 undefined/null → removeProperty.
나머지는 style.setProperty로 업데이트.

6. 텍스트 처리

Text VNode는 Render Phase에서 Text 노드만 생성.
Commit Phase에서 handleTextOnlyVNode / handleVNodeTextProperty가 최종 텍스트 커밋 및 위치 이동을 담당.

7. Deletion 흐름

effectTag === 'DELETION' → prevVNode.meta.domElement를 parent에서 제거.
Component VNode이면 components.unmountComponent 호출 후 DOM 제거.

8. React와의 대조표

React 개념	현재 구현
Fiber Render (`beginWork`/`completeWork`)	`renderFiberNode` (DOM 생성만)
Effect flags	`fiber.effectTag` (PLACEMENT/UPDATE/DELETION)
Effect list traversal	`commitFiberTree` (child→sibling DFS)
`commitPlacement`	`insertBefore` + `getHostSibling`
`commitUpdate` (attrs/styles)	`dom.updateAttributes` / `dom.updateStyles`
`getHostSibling`	동일 알고리즘
namespace-aware attributes	`setAttributeWithNamespace` / `removeAttributeWithNamespace`

결론: Render Phase에서 DOM을 준비하고, Commit Phase에서 삽입/속성/스타일/텍스트/삭제를 수행하는 React 흐름을 그대로 재현했습니다.

9. Child Matching Matrix

Fiber 생성 시 prev/next VNode 자식 매칭은 아래 우선순위로 진행된다. 각 단계에서 매칭되면 DOM을 재사용하고 effectTag = 'UPDATE', 끝까지 매칭되지 않으면 새 DOM을 만들고 effectTag = 'PLACEMENT'가 된다. 매칭에 실패한 prev VNode는 Commit Phase에서 removeStaleChildren이 제거한다.

우선순위	조건	매칭 기준	결과
1	`getVNodeId(childVNode)`가 truthy (`sid`, `key`, `data-decorator-sid` 등)	`prevVNode.children` 중 동일 ID, 아직 매칭되지 않은 항목 검색	DOM/컴포넌트 완전 재사용. 위치가 달라도 현재 인덱스로 이동.
2	명시 ID 없음, `transferVNodeIdFromPrev`가 stype 기반 ID를 부여	prev 자식의 `stype`이 같고 ID가 있는 경우 ID를 복사 → 1단계와 동일하게 동작	컴포넌트/Decorator가 명시 ID 없이도 안정적으로 재사용됨.
3	ID 없음, 같은 인덱스에 prev 자식 존재	`prev.children[i]`의 `tag`와 현재 `tag`가 같거나 둘 다 텍스트 (`#text`)	동일 타입일 때만 DOM 재사용. 타입이 다르면 매칭 실패.
4	ID/인덱스 매칭 실패, 둘 다 Host VNode	prev children 전체를 순회하며 `tag` + 클래스 조합이 같은 항목 탐색 (이미 매칭된 VNode 제외)	mark/decorator wrapper처럼 ID가 없는 Host 노드도 안정적으로 재사용.
5	어느 조건에도 해당하지 않음	매칭 실패로 간주	Render Phase에서 새 DOM 생성, Commit Phase에서 기존 DOM 제거 후 삽입.

추가 규칙:

텍스트 자식은 tag: '#text'로 통일해 3단계에서 타입 검사가 일관적으로 동작한다.
generateVNodeIdIfNeeded가 Host/Text VNode에 tag-index 기반 auto ID를 부여해 동일 구조가 반복될 때도 매칭이 안정적이다.
Render Phase는 매칭 결과만 계산하고 DOM 이동/삭제는 하지 않는다. Commit Phase에서 commitFiberTree가 effectTag에 따라 DOM을 삽입·업데이트·삭제하고, 마지막에 removeStaleChildren/processPrimitiveTextChildren가 남은 동기화를 수행한다.

10. Matching Flow Diagram

flowchart TD
  A[Next child VNode] --> B{getVNodeId 존재}
  B -->|Yes| C[prev.children 중 동일 ID & 미매칭 항목]
  C --> D[DOM 재사용<br/>effectTag = UPDATE]
  B -->|No| E{transferVNodeIdFromPrev 결과 ID}
  E -->|Yes| C
  E -->|No| F{같은 인덱스 prev child}
  F -->|Yes, tag 동일| D
  F -->|No| G{Host 구조 매칭}
  G -->|Yes| H[prev 전체 순회<br/>tag·class 동일 노드]
  H --> D
  G -->|No| I[새 Fiber/DOM 생성<br/>effectTag = PLACEMENT]
  D --> J[Commit Phase에서 기존 DOM 위치보정]
  I --> K[Commit Phase에서 새 DOM 삽입]
  J --> L[removeStaleChildren로 사용되지 않은 prev DOM 제거]
  K --> L

위 다이어그램은 Render Phase와 Commit Phase 간의 역할 분리를 시각화한다. Render Phase는 매칭 경로를 결정하고 fiber.effectTag만 설정하며, Commit Phase는 effectTag에 따라 DOM을 삽입하거나 재배치한 뒤 남은 prev DOM을 안전하게 제거한다.

11. Mount / Update / Unmount Timing

Render Phase에서는 오직 diff 계산과 effectTag 지정만 수행하고 어떤 DOM 조작도 하지 않는다. Mount, Update, Unmount는 모두 Commit Phase에서 effectTag별로 처리된다.

effectTag	시점	실행 함수	수행 작업
`PLACEMENT`	Commit Phase의 `commitFiberNode` → `commitPlacement` 구간	`insertBefore` + `getHostSibling`	새 DOM 삽입, decorator/portal 포함
`UPDATE`	Commit Phase의 `commitFiberNode` 본문	`dom.updateAttributes`, `dom.updateStyles`, 텍스트 갱신, 자식 Fiber parent 갱신	기존 DOM 유지한 채 속성·스타일·텍스트 diff 반영
`DELETION`	Commit Phase의 `commitFiberNode` (vnode 없음) + 부모 `removeStaleChildren`	`components.unmountComponent`, `removeChild`	prev DOM 제거 및 컴포넌트 언마운트, primitive text 포함

11-1. Lifecycle Diagram

sequenceDiagram
  participant Scheduler as FiberScheduler
  participant Render as Render Phase<br/>(renderFiberNode)
  participant Commit as Commit Phase<br/>(commitFiberTree)
  participant DOM as 실제 DOM
  participant Components as ComponentManager

  Note over Scheduler: reconcileWithFiber 시작
  Scheduler->>Scheduler: scheduleWork(rootFiber)
  Scheduler->>Render: performUnitOfWork<br/>(Fiber DFS 순회)
  
  loop Render Phase (각 Fiber 노드)
    Render->>Render: transferVNodeIdFromPrev
    Render->>Render: generateVNodeIdIfNeeded
    Render->>Render: 타입 비교 (prevType vs nextType)
    Render->>Render: effectTag 결정<br/>(PLACEMENT/UPDATE)
    alt prevVNode.meta.domElement 존재 & 타입 동일
      Render->>Render: 기존 DOM 재사용
    else 새 DOM 생성 필요
      Render->>Render: createTextNode 또는<br/>createSimpleElement
      Render->>Render: attrs 설정 (DOM에 저장)
    end
    Render->>Render: vnode.meta.domElement 저장
    Render->>Render: fiber.domElement 저장
    Note over Render: DOM 조작 없음<br/>(생성만)
  end
  
  Scheduler->>Scheduler: Render Phase 완료
  Scheduler->>Commit: onCompleteCallback<br/>(commitFiberTree 호출)
  
  loop Commit Phase (각 Fiber 노드)
    Commit->>Commit: commitFiberNode (DFS 순회)
    alt effectTag = PLACEMENT
      Commit->>Commit: getHostSibling (referenceNode 찾기)
      Commit->>DOM: insertBefore (DOM 삽입)
      Note over Commit,DOM: mount (DOM에 추가)
    else effectTag = UPDATE
      Commit->>DOM: updateAttributes (diff 적용)
      Commit->>DOM: updateStyles (diff 적용)
      alt Text 노드
        Commit->>DOM: textContent 업데이트
      end
      Note over Commit,DOM: update (속성/스타일/텍스트 갱신)
    else effectTag = DELETION
      Commit->>Components: unmountComponent
      Commit->>DOM: removeChild
      Note over Commit,DOM: unmount (DOM 제거)
    end
  end
  
  Commit->>Commit: processPrimitiveTextChildren<br/>(primitive text 처리)
  Commit->>DOM: removeStaleChildren<br/>(사용되지 않은 DOM 제거)
  Commit->>Components: unmountComponent<br/>(stale 컴포넌트 언마운트)

위 시퀀스는 FiberScheduler가 Render Phase를 스케줄링하고, Render Phase가 effectTag만 계산하며, Commit Phase가 mount/update/unmount를 실제 DOM에 적용하는 전체 흐름을 보여준다.

주요 포인트:

FiberScheduler: reconcileWithFiber에서 생성되어 Render Phase를 비동기로 스케줄링 (테스트 환경에서는 동기 모드)
Render Phase: DOM 생성만 수행하고 삽입/수정은 하지 않음. mountComponent/updateComponent는 호출하지 않음 (향후 추가 예정)
Commit Phase: effectTag에 따라 실제 DOM 조작 수행. unmountComponent만 호출 (삭제 시)

11-2. Component Lifecycle (향후 구현 예정)

현재 Fiber reconciler에서는 mountComponent/updateComponent를 호출하지 않지만, 기존 reconciler의 동작을 참고하면 다음과 같이 구현될 예정이다:

mountComponent 호출 시점:

createHostElement에서 새 Host element 생성 후 (기존 reconciler)
Fiber reconciler에서는 commitFiberNode의 PLACEMENT 구간에서 호출 예정

updateComponent 호출 시점:

updateHostElement에서 기존 Host element 업데이트 시 (기존 reconciler)
Fiber reconciler에서는 commitFiberNode의 UPDATE 구간에서 호출 예정

호출 시 전달되는 변경 사항:

components.updateComponent(prevVNode, nextVNode, host, context);
// 내부에서 다음 항목들이 업데이트됨:
// - instance.props = nextSanitizedProps (prevVNode.props와 diff)
// - instance.model = nextModelData (prevVNode.model과 diff)
// - instance.decorators = nextDecorators (prevVNode.decorators와 diff)
// - instance.vnode = nextVNode
// - component.update(host, prevVNode.props, nextVNode.props) (props 변경 시)

unmountComponent 호출 시점:

commitFiberNode에서 effectTag === 'DELETION'일 때
removeStaleChildren에서 사용되지 않은 컴포넌트 제거 시

easylogic/react-style-reconciliation.md

Select an option

No results found

Select an option

No results found

React-style Reconciliation 요약

1. 전체 흐름

1-1. 단계별 다이어그램 (Mermaid)

1-2. VNode 비교/ID 전파 흐름

2. Render Phase 상세

3. Commit Phase 상세

4. `getHostSibling` (React 알고리즘)

5. 속성/스타일 Insert / Update / Delete

`dom.updateAttributes`

`dom.updateStyles`

6. 텍스트 처리

7. Deletion 흐름

8. React와의 대조표

9. Child Matching Matrix

10. Matching Flow Diagram

11. Mount / Update / Unmount Timing

11-1. Lifecycle Diagram

11-2. Component Lifecycle (향후 구현 예정)

easylogic/react-style-reconciliation.md

React-style Reconciliation 요약

1. 전체 흐름

1-1. 단계별 다이어그램 (Mermaid)

1-2. VNode 비교/ID 전파 흐름

2. Render Phase 상세

3. Commit Phase 상세

4. getHostSibling (React 알고리즘)

5. 속성/스타일 Insert / Update / Delete

dom.updateAttributes

dom.updateStyles

6. 텍스트 처리

7. Deletion 흐름

8. React와의 대조표

9. Child Matching Matrix

10. Matching Flow Diagram

11. Mount / Update / Unmount Timing

11-1. Lifecycle Diagram

11-2. Component Lifecycle (향후 구현 예정)

4. `getHostSibling` (React 알고리즘)

`dom.updateAttributes`

`dom.updateStyles`