React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요.

React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. 

리액트 파이버는 리액트 16부터 도입된 새로운 재조정 reconciliation 엔진이다. 기존 Stack reconciliation방식의 동기적 업데이트를 대체하여, 작업을 작은 단위 fiber로 분할하고 우선 순위에 따라서 비동기적으로 처리할 수 있게 설계되었다. 

 

* 동작방식

1. Fiber Tree : 각 컴포넌트는 Fiber 노드로 표현된다.

2. Work Loop : 렌더링 작업을 여러개의 태스크로 분할한다. 브라우저 이벤트 ( 사용자 입력, 애니메이션 ) 사이에 작업을 일시중단 / 재개 한다.

3. Priority Scheduling : 사용자 입력 ( 우선순위 높음 ), 애니메이션 ( 우선순위 중간 ), 데이터 로드 ( 우선순위 낮음 ) 등 우선순위에 따라서 스케쥴링한다.

 

[참고자료]

* React Fiber는 리액트가 화면을 업데이트할 때 일을 쪼개서 처리하는 스케쥴러입니다. 이 놈 때문에 사용자 경험이 더 부드럽고 빠른 리액트 앱을 만들수 있는거. 

 

* 옛날 방식과 요즘 방식 (Fiber 방식) 비교

옛날 방식 : Stack Reconciliation 스택 재조정. 요리사가 한번에 주문 전체를 다 만들 때까지 기다려야 한다. 이것은 손님이 오래 기다리는 결과를 야기한다.

 

Fiber 방식

- 주문을 작은 단계(요리과정)로 나눠서 처리한다.

- 중요한 주문(사용자 클릭, 타이핑)은 우선순위로 바로 처리

- 낮은 우선순위 작업( 애니메이션 업데이트 등)은 여유가 생길 때 마저 처리

 

 

* 핵심포인트 정리

- 작업분할 : 큰 렌더링 작업을 작은 fiber 단위로 쪼갬

- 우선순위 스케쥴링 : 사용자 입력 같은 중요한 작업이 먼저 처리됨

- 중단.재개가능 : 긴 작업 중간에 멈췄다가 나중에 다시 이어서 실행됨. 

 

* 결과

- UI 반응 속도 좋아짐 : 버튼 클릭 같은 동작이 즉시 반응함

- 프레임 드롭이 줄어듦 : 긴 렌더링으로 인한 끊김 사라짐.