React Fiber 구경하기

https://d2.naver.com/helloworld/2690975

 

해당 글을 읽고 알게된 내용에 대해 정리하는 글입니다.

 

JSX 로 선언된 표현식은 React 엘리먼트라는 객체로 치환됩니다.

React 엘리먼트는 일반 객체입니다. (클래스 인스턴스가 아님)

 

-> JSX 가 표현식이 치환된 객체이므로 태그 이름, 어트리뷰트 및 값, 자식 등의 정보가 있을 것이라 유추할 수 있습니다.

 

native DOM 에 React 엘리먼트를 렌더링하기 위해서는 루트를 생성해야 합니다.

React 엘리먼트는 native DOM 에 바로 렌더링 할 수 없고 루트를 통해 렌더링해야 합니다.

React 엘리먼트를 업데이트하려면 생성과 유사하게 새로운 React 엘리먼트를 생성하고 루트를 통해 렌더링해야 합니다.

 

N 개의 엘리먼트가 있는 트리를 다른 트리로 변환하는 알고리즘의 복잡도는 최소 O(n^3) 으로 알려져 있습니다.

React 는 아래 두 조건을 전제로 복잡도가 O(n) 인 휴리스틱 알고리즘을 재조정에 사용한다고 합니다.

 

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어냅니다.

2. 개발자가 key prop 을 통해 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있습니다.

 

virtual DOM 은 React 내부에 실존하는 어떤 구체적인 인스턴스나 value 라기 보다는 React 가 React 엘리먼트와 native DOM 을 동기화하기 위한 패턴의 이름을 의미합니다.

 

React 는 컴포넌트 트리에 대한 추가 정보를 포함하기 위해 fiber 라는 내부 객체를 사용합니다.

 

React 는 JSX 로 작성된 React 엘리먼트를 HTML 엘리먼트로 변환하여 DOM 에 렌더링하며

변경이 발생했을 때 정확히 변경된 부분을 파악하여 적용하는 방식을 취하고 있습니다.

 

즉 어트리뷰트나 value 등의 변경은 핀 포인트로 적용하고 엘리먼트 타입의 변경은 하위 트리 전체를 변경하는 것으로 이해할 수 있습니다.

 

React 개발팀은 기존의 알고리즘으로는 응답성을 잃지 않으면서 빠르게 업데이트하는 것이 어렵다고  판단했습니다.

파이버가 기존의 스택 재조정자와 근본적으로 다른 점은 동시성입니다.

DOM 업데이트, 렌더링 로직을 작업 단위로 구분하고 이를 비동기로 실행하여 최대 실행 시간이 16ms 가 넘지 않도록 제어합니다.

 

파이버는 작업을 청크로 분리하여 실행 시간만을 관리하는 것이 아니라 작업의 유형에 따라 우선순위를 부여하고 인터럽트 기능이 있습니다.

 

React 는 네 개의 단계로 구분하여 동작하게 됩니다.

 

Render 단계 : JSX 선언 또는 React.createElement() 를 통해 일반 객체인 React 엘리먼트를 생성합니다.

ReConcile 단계 : 이전에 렌더링된 실제 DOM 트리와 새로 렌더링할 React 엘리먼트를 비교하여 변경점을 적용합니다.

Commit 단계 : 새로운 DOM 엘리먼트를 브라우저 뷰에 커밋합니다.

Update 단계 : props, state 변경 시 해당 컴포넌트와 하위 컴포넌트에 대해 위 과정을 반복합니다.

 

루트 생성

createRoote() 는 몇 가지 플래그를 설정한 후 createFiberRoot() 를 호출하여 고유한 FiberRootNode 를 생성합니다.

 

FiberRootNode 와는 별개로 HostRoot 타입의 일반 FiberNode 를 하나 더 생성하여 root.current 로 할당하고

uninitializedFiber.stateNode 에 root 를 할당하여 순환 참조가 가능하도록 합니다.

그리고 root.current 를 DOM 엘리먼트에 React 루트로 저장합니다.

그리고 root:FiberRootNode 를 ReactDOMRoot 클래스로 래핑하여 전달합니다.

 

Render 단계

React public API 의 ReactRootDOM.render() 는 JSX 등으로 작성된 코드가 실제 DOM 으로 커밋되기까지 모든 과정을 의미합니다.

 

React 내부에서의 Render 단계는 더 좁은 의미로 JSX 또는 React.createElement() 로 작성된 코드를 React 엘리먼트로 변경하는 작업만을 의미합니다.

React 엘리먼트는 클래스가 아닌 일반 객체로 사용자가 작성한 컴포넌트 또는 엘리먼트 타입과 어트리뷰트, 자시겡 관한 정보를 담고 있는 객체입니다.

 

하위 설명이 잘 이해가 안됨

 

Reconcile 단계

root.render(<SimpleComp />) 를 실행하면 SimpleComp React 엘리먼트만 생성 후 Reconcile 단계에 진입합니다.

 

재조정자는 FiberNode 를 하나의 작업 단위로 취급합니다.

즉 FiberNode 는 자체로 렌더링에 필요한 정보를 담고 있는 객체이자 재조정 작업 단위인 것입니다.

 

Reconcile 단계는 크게 begiWork 와 completeWork 으로 나눠집니다.

 

React 내부에서 루트 FiberNode 를 HostRoot 컴포넌트라고 부른다는 것을 알 수 있습니다.