리액트의 내부개요

리액트의 내부 개요

리액트의 내부 개요는 위와 같은 4단계로 간단히 말할 수 있습니다.

트리거

이 단계를 'Trigger'라고 명명한 이유는 모든 작업이 여기서 시작되기 때문입니다. 초기 마운트이든 상태 훅에 의한 리렌더링이든 상관없이 이 단계에서 시작됩니다. 이 단계에서는 React 런타임에게 어떤 부분이 렌더링되어야 하는지(scheduleUpdateOnFiber()를 통해)와 어떻게 렌더링되어야 하는지를 알려줍니다.
이 단계는 '작업 생성'이라고 생각할 수 있습니다. ensureRootIsScheduled()는 이러한 작업을 생성하는 마지막 단계이며, 이후 scheduleCallback()을 통해 해당 작업이 Scheduler로 전송됩니다.

스케줄링

이는 React 스케줄러입니다. 기본적으로 우선순위에 따라 작업을 처리하는 우선순위 큐입니다. scheduleCallback()은 렌더링이나 이펙트 실행과 같은 작업을 스케줄링하기 위해 런타임 코드에서 호출됩니다. 스케줄러 내부의 workLoop()는 작업이 실제로 실행되는 방식입니다.

렌더링

렌더링은 스케줄링된 작업(performConcurrentWorkOnRoot())입니다. 이는 새로운 Fiber 트리를 계산하고 호스트 DOM에 적용해야 할 업데이트를 파악하는 것을 의미합니다.

여기서 Fiber 트리의 세부사항을 알 필요는 없습니다. 이는 기본적으로 우리 앱의 현재 상태를 나타내는 내부 트리 구조입니다. 이전에는 Virtual DOM이라고 불렸지만, 이제는 DOM만을 위한 것이 아니기 때문에 React 팀은 더 이상 이를 Virtual DOM이라고 부르지 않습니다.

따라서 performConcurrentWorkOnRoot()는 Trigger 단계에서 생성되고, 스케줄러에서 우선순위가 정해진 다음, 여기서 실제로 실행됩니다. 이를 Fiber 트리를 돌아다니면서 재렌더링이 필요한지 확인하고 호스트 DOM에 필요한 업데이트를 파악하는 작은 사람이 있다고 생각하면 됩니다.

동시성 모드 때문에 "렌더링" 단계는 중단되었다가 다시 시작될 수 있으며, 이로 인해 꽤 복잡한 단계가 됩니다.

커밋

새로운 Fiber 트리가 구성되고 최소한의 업데이트가 도출되면, 이제 호스트 DOM에 업데이트를 "커밋"할 시간입니다.

물론 DOM을 조작하는 것(commitMutationEffects()) 외에도 더 많은 작업이 있습니다. 예를 들어, 모든 종류의 이펙트도 여기서 처리됩니다(flushPassiveEffects(), commitLayoutEffects()).