React Fiber 소개

React Fiber

리액트의 코어 알고리즘을 재구현한것이다. 리액트의 렌더링은 애니메이션에서 불안한 모습을 보였다.

리액트로 애니메이션을 구현하면 리액트 내부적으로 작동하고 있는 렌더링 알고리즘이 추가로 돌기 때문에 퍼포먼스 이슈가 있었다. 

 

리액트의 Fiber는 이런 문제를 해결해준다.

incremental rendering이라고 불리는 이 방식은 하나의 큰 렌더링 작업을 여러개의 작은 렌더링 작업으로 나누어서 실행한다. 이런 방식으로 리액트의 렌더링 알고리즘이 자바스크립트의 메인쓰레드를 전부 차지하지 못하게 막아준다.

 

원래 기존의 리액트 reconciliation은 재귀적으로 동작하기 때문에 중간에 멈출수가 없었다. 그래서 만약에 이 reconciliation작업이 오래걸린다면 16ms내에 프레임을 찍어내지 못해서 화면이 끊기는 현상이 발생한것이다.

 

Fiber는 async reconciliation이다. browser가 idle한 상태가 되었을때 잘게 나눠진 렌더링 작업을 조금씩 실행하는 구조이다. 브라우저의 requestIdleCallback이라는 API를 사용한다.

리액트 v16 이전, 애니메이션 렌더링이 끊긴다.

리액트 Fiber 도입 이후, 애니메이션이 부드럽다.

위 그림에서 애니메이션이 끊기는 이유는 싱글스레드인 자바스크립트 엔진이 삼각형 내부에 있는 수많은 숫자들을 업데이트하느라 애니메이션을 실행시키지 못했기 때문이다. Fiber는 렌더링을 잘게 나누어 브라우저가 Idle한 상태일때 조금씩이지만 렌더링을 꾸준히 하기 때문에 16ms마다 프레임이 찍힐 수 있게 해준다. 그래서 화면이 끊기지 않는것이다.