파이버

[gs0428]

파이버(Fiber)란?

애플리케이션의 UI를 더 효율적으로, 특히 비동기적으로 업데이트할 수 있게 해준다.

Fiber의 특징

• 작업 중단 및 재개
• 우선 순위 부여
• 작업의 재사용
• 작업 중단

Fiber의 구조

type과 key

Fiber의 type은 해당 fiber가 나타내는 컴포넌트의 종류를 의미하며, key는 동일한 type을 가진 컴포넌트들 사이에서 구분하기 위해 사용된다.

child와 sibling

function OneComp() {
	return <Child />
}

function TwoComp() {
	return (
	<>
		<Child1 />
		<Child2 />
	</>);
}

첫 번째 코드에서 child는 Child이고 sibling은 없다.

두 번째 코드에서 child는 Child1, Child2이고 Child1과 Child2는 sibling의 관계를 갖는다.

return fiber

현재 항목을 수행한 후 프로그램이 반환해야하는 정보를 담고 있는 fiber이다. 부모 fiber로 생각될 수도 있다.

다수의 자식 fiber를 갖고 있다면 각각의 return fiber는 그 부모이다. 위 예제에서 Child1과 Child2의 return fiber는 Parent이다.

pendingProps와 memoizedProps

pendingProps는 실행 처음에 설정되고, memoizedProps는 실행 마지막에 설정된다.

pendingProps와 memoizedProps가 같다면 이전의 결과값을 재사용하여 불필요한 업데이트를 방지할 수 있다.

pendingWorkPriority

Fiber 작업의 우선 순위를 나타낸다.

alternate

현재 Fiber와 진행 중인 작업을 나타내는 fiber(work-in-progress fiber) 사이를 전환하는 데 사용된다. 이를 통해 작업의 중단과 재개를 효율적으로 관리할 수 있다.

output

최종적으로 생성된 출력값을 나타낸다.

host component란?
React가 플랫폼에 특화된 기본 요소들과 상호작용하기 위해 사용하는 기본 컴포넌트이다.
ex) HTML에서 사용하는 div, span 그리고 React Native에서 사용되는 View와 Text

같이 보면 좋은 자료

• naver d2

[coddingyun]

기존 재조정 알고리즘

• diff 알고리즘으로 진행되는데, 이를 위해 재귀적으로 진행된다.
• call stack에 쌓여있는 모든 함수들이 return될 때까지 중단할 수 없다.

fiber

• 단일 연결 리스트로 구성된다.
• call stack의 가장 아래에는 walk 함수가 깔려있고, 계속해서 doWork 함수가 호출되었다가 사라진다.
• 이 함수의 핵심은 current node에 대한 참조를 계속해서 유지한다는 점이다. 때문에 이 함수가 중간에 멈춘다 할지라도, current node로 돌아와서 작업을 재개할 수 있다.

https://velog.io/@yesbb/virtual-dom%EC%9D%98-%EC%84%B1%EB%8A%A5%EC%9D%B4-%EB%8D%94-%EC%A2%8B%EC%9D%80%EC%9D%B4%EC%9C%A0