useState가 코드로 정의된 곳은 어딜까? reconciler까지 찾아가기!

Hook은 어디서 오는걸까? 

• React 코어 
  • React <- ReactHooks <- ReactCurrentDispatcher

react 코어는 react element에 대한 정보만 알고 있음 

react element는 fiber로 확장해야 hook을 포함하게 됨  

reconciler가 확장함. 즉 reconciler가 hook을 알고 있음. reconciler -> react 코어로 어떻게 전달? 

 

react 코어는 hook을 사용하기 위해 외부에서 주입받음(의존성 끊기 위해서 -> 이곳 저곳에서 사용 가능하도록) 

• react 
  • React <- ReactHooks <- ReactCurrentDispatcher <- ReactSharedInternals 

react/ReactShardInternals.js는 객체에 property로 외부 모듈을 할당 받음 

 

shared는 모든 패키지가 공유하는 패키지 

•   shared/ReactSharedInternals.js는 react 코어 패키지에 연결된 출입구 

 

reconciler는 shared에 hook을 주입(객체에 property 할당) 

• react
  • React <- ReactHooks <- ReactCurrentDispatcher <- ReactSharedInternals 
• shared
  • ReactSharedInternals
• reconciler

 

renderWithHooks  - fiber와 hook을 연결해준다. 

renderWithHooks() -> hook과 함께 render 즉, hook을 주입하는 역할 

(렌더링: 컴포넌트 호출 후 그 결과가 VDOM에 반영되는 과정) 

 

컴포넌트 상태가 mount, update 일 때 + 다음 컴포넌트가 사용할 수 있게 전역변수 초기화 로직도 포함(nextCurrentHook, firstWorkInProcessHook 등은 전역변수 즉, 작업중인 컴포넌트에만 접근가능한 값. 작업(hook 주입, 렌더링 등)이 끝나면 null로 초기화해서 다음 컴포넌트가 활요할 수 있도록 준비하는 로직) 

왜 전역변수? 함수가 다 끝나기 전에 다른 함수를 호출 그 함수가 끝나기 전 함수에서 활용하던 변수를 사용해야 함. 전역변수 활용으로 가능.

 

 

Component(fiber)와 hook을 연결 

currentlyRenderingFiber 전역변수에 workInProcess 할당 

nextCurrentHook 잘 모르지만 일단 hook이구나 여기에 

• current가 
  • null이 아니면 -> current.memorizedState 할당
  • null이면 -> null 할당 

 

current는 VDOM 중에서 DOM에 mount된 정보를 가진 fiber(작업중 fiber = workInProcess) 

current.memorizedState에는 hook이 들어있구나(fiber의 memorizedState -> hook할당)