- 한줄요약:
리액트 16부터 도입된 재조정 알고리즘 엔진으로, 특정 작업에 우선순위를 매겨서 작업의 작은 조각들을 동시적으로 정지,재가동 할 수 있게 해주는 재조정 엔진이다. - 리액트 파이버의 목표는 애니메이션, 레이아웃, 제스쳐, 중단 또는 재사용 기능과 같은 영역에 대한 적합성을 높이고 다양한 유형의 업데이터에 우선순위를 지정하는 것.
- 핵심 기능은 렌더링을 증분하는 것
- 렌더링 작업을 여러 덩어리로 나누어, 여러 프레임에 분산하는 것.
- 방금 돌아온 API 호출의 응답 처리
- 현재 진행 중인 스크롤 애니메이션 업데이트
- 사용자의 버튼 클릭 처리
세가지 태스크가 있을 때, 1번 태스크가 조금 지연되도 사용자는 큰 차이를 느낄 수 없음. but 2번 태스크에서 돌아가던 애니메이션이 지체되면 사용자는 눈에띠는 jank 현상을 겪음.
-> 따라서 이러한 스케쥴링을 위해서 리액트 파이버의 등장!!
- 리액트가 변경해야 할 부분을 결정하기 위해 한 트리를 다른 트리와 비교하는데 사용하는 알고리즘이다.
- 재조정은 결국 버츄얼 돔의 뒤에 있는 알고리즘이라고 보면 된다.
- Reconciler는 트리의 어떤 부분이 변경되었는지 계산한다.
- Renderer는 계산된 정보로 앱을 실제로 업데이트하는데 사용한다.
- 이러한 분리는 React DOM과 React Native가 React Core에서 제공하는 동일한 Reconciler를 공유하면서 각자 자체적인 렌더러를 사용 할 수 있게끔 한다.
-
React Fiber는 React의 내부 리랜더링 엔진을 개선하기 위한 새로운 리액트 핵심 알고리즘입니다. 기존의 React 렌더링 엔진은 동기식(Synchronous)이었기 때문에 복잡한 작업을 수행할 때 화면이 멈추는 문제가 발생할 수 있었습니다. 이 문제를 해결하고 성능을 향상시키기 위해 React Fiber가 도입되었습니다.
-
React Fiber는 비동기식(Asynchronous)으로 작동하며, 렌더링 작업을 작은 조각으로 나누어 우선순위를 부여하고 관리함으로써 더 나은 성능과 사용자 경험을 제공할 수 있도록 설계되었습니다. 즉, Fiber는 React의 렌더링 작업을 더 효율적으로 분할하고 우선순위를 관리하여 더 빠르게 렌더링되고 반응하는 애플리케이션을 만들 수 있게 해줍니다.
-
React Fiber의 핵심 아이디어는 작업을 나누어 우선순위를 정하고, 렌더링 작업을 브라우저의 공백 시간(Idle time)에 분산시키면서 응답성 있는 사용자 경험을 유지하는 것입니다. 이를 통해 렌더링 작업이 브라우저의 메인 스레드를 너무 오래 점유하지 않도록 하고, 동시에 사용자 입력과 같은 우선순위가 높은 작업에 대한 응답성을 높일 수 있습니다.
-
React Fiber는 React v16부터 도입되었으며, React의 코어 업데이트 중 하나로서 성능과 사용자 경험을 향상시키는 데 중요한 역할을 합니다. Fiber 아키텍처를 사용하면 React 애플리케이션의 성능을 최적화하고 더 부드러운 사용자 경험을 제공할 수 있습니다.