리액트 파이버
•
파이버는 화면 변경에 대한 정보를 담은 자바스크립트 객체
•
파이버 재조정자가 변경사항을 수집하여 파이버를 기준으로 DOM 변경 요청
•
과거의 스택 기반의 조정자는 싱글 스레드에서 동기적으로 이루어져 동시다발적 이벤트에 비효율적
•
하나의 작업 단위로 구성된 파이버는 작업 단위를 하나씩 처리하고 finishWork() 를 통해 마무리
◦
랜더 단계: 사용자에게 노출되지 않는 비동기 작업 수행 (우선순위 지정, 중지, 삭제 등)
◦
커밋 단계: DOM에 실제 변경사항 반영을 위한 commitWork() 실행 (동기식, 중단 X)
리액트 파이버 트리
•
두 종류의 파이버 트리
◦
현재 파이버 트리
◦
workingInProgress 트리: 더블 버퍼링(미완성 그래픽 노출 X)을 위해 작업 중인 트리
◦
커밋 단계에서 파이버 작업 종료시 포인터 변경으로 workingInProgress가 파이버 트리가 됨
파이버의 작업 순서
•
beginWork 함수를 통해 파이버 작업 시작 → 자식이 없는 파이버 만날 때까지 트리 순회
•
completeWork() 함수를 사용해 파이버 작업 완료 → 형제 노드로 넘어감
•
루트 노드가 완성되는 순간 최종적으로 commitWork() 실행 → 변경사항 DOM 반영
정리
•
가상 DOM과 리액트의 핵심은 값으로 UI를 표현하여 효율적으로 관리
•
가상 DOM과 파이버는 속도 외에도 재조정자가 복잡한 값의 변화를 관리 → 효율적으로 유지보수
