Fiber 트리 구조 시각화

← Fiber 예제로 돌아가기

React Flow를 사용하여 Fiber 노드의 관계(child, sibling, return)를 시각적으로 탐색하세요.

예제 선택

노드 타입

HostRoot (루트)
FunctionComponent
HostComponent (DOM)
HostText (텍스트)

엣지 타입

child (자식)
sibling (형제)

🔗 child 포인터

각 Fiber 노드는 첫 번째 자식을 가리키는 child 포인터를 가집니다. 실선 화살표로 표시됩니다.

↔️ sibling 포인터

형제 노드를 가리키는 sibling 포인터로 같은 부모의 자식들을 연결합니다. 점선으로 표시됩니다.

↩️ return 포인터

부모 노드를 가리키는 return 포인터로 트리를 거슬러 올라갈 수 있습니다. (시각화에서는 생략)