React Fiber

React Fiber란?

가상 dom과 실제 dom을 스냅샷 단위로 비교해 변경사항을 수집하는 js객체.

파이버

리액트 컴포넌트에 대한 정보를 가진 작은 단위의 객체

역할

• 가상 dom과 실제 dom 사이 차이가 있으면 해당 파이버를 기준으로 렌더링 요청
• 위 작업을 작은 단위로 분할하여 스케줄링 (비동기)
• 이전에 했던 작업을 재사용 혹은 폐기 가능

생성시점

컴포넌트 최초 마운트 시점
1개 react element당 1개 파이버 객체 생성

react element

브라우저 DOM 엘리먼트가 아닌, JSX로 선언된 표현식이 치환된 객체

• React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다
• native DOM에 바로 렌더링할 수 없고 루트를 통해 렌더링해야 함

작동순서

1. 렌더 단계(비동기): 스케줄링
2. 커밋 단계(동기): dom에 실제 변경 사항 반영 및 더블 버퍼링

더블 버퍼링

다음 작업을 백그라운드에서 실행하여 완료된 후 교체하는 것
-> 실행과정을 보여주지 않는다!

리액트 파이버 트리

1. 현재 모습을 담은 current 트리에서 업데이트 발생
2. 해당 업데이트를 반영한 workInProgress 트리 빌드 (리액트 파이버 작업중...)
3. workInProgress트리 렌더링 완료후 current트리와 교체 -> 더블 버퍼링

Ref와 Dom

React에서 native DOM API를 직접 컨트롤해야 하는 경우, 해당 부분을 가능한 react의 선언형 api(useRef 등)로 조작해야 한다!
-> 리액트의 내부 api를 사용한 게 아니라 native DOM을 직접 조작하면, 이 변경 사항을 React가 유지할 수 없다!