React fiber
React Fiber?
리액트 재조정 알고리즘(Reconciliation Algorithm)을 보완한 알고리즘이다.
React 16에서 도입되었다.
Fiber라는 용어는 React의 데이터 구조 혹은 아키텍처를 의미하며 DOM 트리의 Node를 나타내는 ‘fiber’에서 유래되었다.
React Fiber의 개선사항
재조정 알고리즘(Reconciliation Algorithm)의 경우 재귀적으로 동작하여 중간에 멈출 수 없다.
Fiber는 정해진 우선순위에 따라 작업을 일시중지, 재개, 중단할 수 있는 작은 단위로 나누어 더욱 유동적으로 동작할 수 있도록 한다.
특히 애니메이션의 경우 재조정 알고리즘(Reconciliation Algorithm)에서는 추가로 랜더링 알고리즘이 돌아가야하고 16ms 내에 랜더링 될 수 없었다.
React Fiber에선 애니메이션 랜더링 작업을 작은 단위로 나누어 브라우저가 쉬고 있을 때(idle 상태일 떄) 조금씩 랜더링을 지시하는 방식을 통해 더욱 유연하게 애니메이션을 랜더링 할 수 있게한다.
작동방식
- Reconciliation
- UI에 랜더링할 변경사항을 계산한다.
- 계산이 끝나면 React는 변경사항을 예약한다
- 실제 변경이 반영되지는 않는 단계다.
- 작업단위 마다의 우선순위를 설정하므로 하나의 작업이 여러개의 단위로 나뉘어 각각 다른 우선순위를 지닌다.
- Commit
- React가 DOM에 랜더링을 지시한다.
- Reconciliation은 중단될 수 있지만 Commit은 중단될 수 없다.