[React 까보기 시리즈] hook이 상태를 업데이트하는 과정 & reconciler가 WORK를 스케줄링하기 위한 사전 작업

https://www.youtube.com/watch?v=G2ib1cVOKbo
https://www.youtube.com/watch?v=kWjykwAguXo

 

hook의 끝, scheduler의 시작 

hook을 통해 컴포넌트 상태를 업데이트 한 후, 업데이트를 반영할 WORK를 scheduler에게 전달하고 scheduler는 스케줄링 된 Task를 적절한 시기에 실행한다. 

 

각 패키지의 역할 

reconciler는 비동기 호출이 필요한 WORK의 실행 제어권을 scheduler에게 위임. 

scheduler가 브라우저의 상태와 다양한 조건을 확인하여 적절한 시기를 판단하고 WORK를 실행. 

 

reconciler가 WORK를 스케줄링하고 scheduler에 의해 실행되는 흐름에서 각 패키지의 역할 

• reconciler
  • VDOM 재조정 작업 전에 설정해야 하는 부분들 처리
• scheduler
  • 스케줄링 된 Task에 우선순위 반영과 실행하기 적절한 때를 판단하고 작업의 실행과 중단을 담당
  • host config 모듈 존재, 호스트 환경에 의존적인 API 사용하는 모듈 (비동기 API, performance,isInputPending 등) 

reconciler가 WORK를 스케줄링하기 위한 사전작업 

배경

scheduler는 적절한 타이밍에 우선순위를 판단하여 WORK를 실행 

WORK 실행에 관한 우선순위 관련 값은 언제 이벤트가 발생했느냐 즉 expirationTime은 이벤트 발생 시점. 

이 값을 reconciler가 fiber에 expirationTime 할당(scheduleWork 함수는 reconciler가 호출) 

 

reconciler의 사전 작업 

1. 해당 컴포넌트에서 이벤트가 발생했음을 알려주는 expirationTime을 할당 

2. 이벤트가 발생한 컴포넌트의 VDOM root를 가져옴 

3. root에 스케줄링 정보를 기록 

 

root란? 

ReactDom.render() 호출로 컴포넌트를 삽입하는 부모 태그가 root 

root : VDOM = 1:1 VDOM 업데이트를 위한 WORK 실행 우선순위 관련 값인 스케줄링 정보는 root에 할당 

여러개의 Update가 발생하여 여러개의 WORK를 스케줄링 해야할 때 우선순위 판단을 위해 기준값이 필요함. 이 기준값을 root에 새김