2주차_조명근_공통.md

상태가 변화하는 과정을 Deep하게 공부해보기

React에서 "상태"는 뭘까요?

상태는 React에서 제공하는 렌더링을 위한 변수입니다.
상태값이 변하면 렌더링 큐를 업데이트 하는 로직을 볼 수 있습니다.
먼저 어떻게 useState가 이뤄졌는지 살펴보겠습니다.

1. ReactSharedInternals 라는 내부 모듈에서 사용하기 위해 정의된 공통 변수가 있습니다.

2. ReactSharedInternals.H 에서 useState를 꺼내옵니다.

3. ReactSharedInternals.H는 ReactSharedInternalsClient에서 초기화됩니다.

4. ReactFiberHooks.js의 HooksDispatcherOnMount에서 react에서 정의한 hook을 관리합니다.

5. 이 중 useState는 mountState를 사용하는데, 구성은 아래와 같습니다.

// ReactFiberHooks.js
function mountState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  const hook = mountStateImpl(initialState);
  const queue = hook.queue;

  // dispatchSetState를 첫번째 매개변수를 제외하고 bind 함으로써 2,3 번쨰 parameter는 내부 변수를 사용하고
  // 우리가 사용하는 setState는 parameter를 하나만 사용하게 됩니다.
  const dispatch: Dispatch<BasicStateAction<S>> = (dispatchSetState.bind(
    null,
    currentlyRenderingFiber,
    queue,
  ): any);
  queue.dispatch = dispatch;

  return [hook.memoizedState, dispatch];
}

6. dispatchSetState에서 setState로직을 관리하는 것 처럼 보입니다.

// ReactFiberHooks.js
function dispatchSetState<S, A>(
  fiber: Fiber,
  queue: UpdateQueue<S, A>,
  action: A,
): void {
  // ...생략...

  const lane = requestUpdateLane(fiber);
  const didScheduleUpdate = dispatchSetStateInternal(
    fiber,
    queue,
    action,
    lane,
  );
  if (didScheduleUpdate) {
    startUpdateTimerByLane(lane);
  }
  // ...생략...

}

7. requestUpdateLane으로 우선순위 lane을 받아온 후 업데이트 렌더 queue를 업데이트.
8. 스케쥴에 따라 beginWork 실행된다고 함. (실제 코드는 못 찾았습니다 ㅠ)
   1. ReactFiberBeginWork.js