React Fiber

• 16버전부터 파이버라 불리는 새로운 코어 아키텍쳐를 채택

• 이것은 기존의 스택 기반 알고리즘을 완전히 새롭게 작성한 것.

• Fiber는 React v16에서 리액트의 핵심 알고리즘을 재구성한 새 재조정(Reconciliation) 엔진

• React Element 를 VDOM에 올려놓기 위한, 확장을 해주는 역할이라고 보자.

• 리액트 파이버의 목표는 애니메이션, 레이아웃, 제스쳐, 중단 또는 재사용 기능과 같은 영역에 대한 적합성을 높이고 다양한 유형의 업데이터에 우선순위를 지정하는 것.

• 핵심 기능은 렌더링을 증분하는 것

  • 렌더링 작업을 여러 덩어리로 나누어, 여러 프레임에 분산하는 것.

렌더링에 우선순위는 왜 필요할까?

• 방금 돌아온 API 호출의 응답 처리
• 현재 진행 중인 스크롤 애니메이션 업데이트
• 사용자의 버튼 클릭 처리

세가지 태스크가 있을 때, 1번 태스크가 조금 지연되도 사용자는 큰 차이를 느낄 수 없음. but 2번 태스크에서 돌아가던 애니메이션이 지체되면 사용자는 눈에띠는 jank 현상을 겪음.

-> 따라서 이러한 스케쥴링을 위해서 리액트 파이버의 등장