리액트의 작동원리 - (2) fiber

posinity·2023년 3월 27일
0

React

목록 보기
44/58
post-custom-banner

정의

Fiber는 React v16에서 리액트의 핵심 알고리즘을 재구성한 새 재조정(Reconciliation) 엔진이다. React Fiber의 목표는 애니메이션, 레이아웃, 제스처, 중단 또는 재사용 기능과 같은 영역에 대한 적합성을 높이고 다양한 유형의 업데이트에 우선 순위를 지정하는 것이다.

핵심 기능은 렌더링 작업을 여러 덩어리로 나누어 여러 프레임에 분산하는 기능이다.

문서에 의하면, 이 기능의 주요 목표는 다음과 같다.

i. 중단 가능한 작업을 덩어리로 나누기
ii. 진행 중인 작업의 우선순위를 지정하고, 리베이스하고 재사용
iii. 리액트의 레이아웃을 지원하기 위해 부모와 자식 간에 yield back and forth
iv. render()로부터 다수 엘리먼트들을 반환
v. 에러 바운더리에 대한 더 나은 지원

React Fiber(리액트 파이버로 읽으면 될듯하다. 여기서는 원문 그대로 Fiber를 사용하겠다)는 현재 진행 중인 React core 알고리즘 재구성이다. React 팀의 2년간의 연구 결과이다.

Fiber의 목적은 animation, layout, gesture (애니메이션, 레이아웃, 제스처)와 같은 영역들에 있어서 React의 적합성을 확보하기 위함이다. 주요 주제는 점증적 렌더링 (incremental rendering)으로, 렌더링 작업을 chunk 단위로 나눈뒤 여러 프레임에 수행하는 것을 의미한다.

이와 더불어 새로운 업데이트가 들어올 때 기존의 작업을 멈추거나, 정지하거나, 재사용하는 기능들을 포함한다. 이외에도 다른 종류에 업데이트에 우선순위를 부여하거나, 새로운 동시성 모드를 위한 초기 작업들이 포함된다.

참고자료

React Fiber 얕게 알아보기

profile
문제를 해결하고 가치를 제공합니다
post-custom-banner

0개의 댓글