React Fiber

React Fiber는 React v16부터 도입된 새로운 조정 알고리즘으로, UI 업데이트를 더 효율적으로 관리하기 위해 만들어졌습니다.

FIBER 재조정자

• Fiber는 가상 DOM 노드의 트리 구조에서 각 노드를 나타냅니다.
• Fiber는 현재 실행 중인 작업에 대한 정보를 담고 있으며, 이전에는 스택 구조로 이용되던 재귀 호출을 대체하는 방식으로 작동합니다.

FIBER NODE

• Fiber 노드에는 현재 노드의 타입, 자식 노드, 형제 노드 등과 같은 정보가 담겨 있습니다.
• Fiber 노드는 트리 순회를 통해 업데이트 우선순위를 결정합니다.

updateQueue

• updateQueue는 React 엘리먼트에 대한 업데이트 사항을 유지하고 처리하는 데 사용됩니다.
• 작업 단위를 이전에 처리했던 큐 방식보다 효율적으로 분할하여 처리할 수 있도록 도와줍니다.

memoizedState

• memoizedState는 함수 컴포넌트 내에서 상태 값을 관리하는 데 사용됩니다.
• memoizedState를 이용하면 컴포넌트의 상태를 효율적으로 관리할 수 있고, 불필요한 렌더를 방지할 수 있습니다.

그 외 속성

• Fiber에는 다양한 속성들이 포함되어 있으며, 이를 통해 React의 업데이트 동작을 관리하고 최적화할 수 있습니다.
• 각 속성은 React의 내부적인 작동을 개선하고 성능을 향상시키는 데 기여합니다.

마무리

React Fiber는 기존의 스택 기반 조정 알고리즘보다 효율적으로 UI 업데이트를 관리하고 성능을 향상시키는 데 기여합니다. Fiber의 구조와 각 요소들의 역할을 이해하면 React 애플리케이션을 더욱 효율적으로 개발할 수 있습니다.