리액트 전체 동작 원리

[JSX 코드] → CreateElement → [VNode(실제로는 ReactElement)] → Render Phase(Virtual DOM 구조 또는 Fiber Tree 생성) → Commit Phase (실제 DOM 반영)

createElement

사실 이 부분이 제일 이해가 잘 안되었는데요… 그래서 다른 코드들을 참고 + AI랑 열심히 공부했습니다

• createElement 안에서 3개 이상의 params을 받을 때 분기 처리?

  • 처음에 되게 으쌰으쌰하는 마음으로 Preact와 React 코드를 봤었는데, params가 3개 이상이면 분기 처리를 하는 부분이 있었습니다.
  • 역시 이해가 안되었는데 3개 이상의 params이면 (’div’, props, VNode1, VNode2) 이런식으로 자식요소가 2개 이상인 거라서, 배열 및 평탄화 처리를 해주는 내용이었습니다.

  export function createElement(type, props, children) {
  	let normalizedProps = {},
  		key,
  		ref,
  		i;
  	for (i in props) {
  		if (i == 'key') key = props[i];
  		else if (i == 'ref' && typeof type != 'function') ref = props[i];
  		else normalizedProps[i] = props[i];
  	}
  
  	if (arguments.length > 2) {
  		normalizedProps.children =
  			arguments.length > 3 ? slice.call(arguments, 2) : children;
  	}
  
  	return createVNode(type, normalizedProps, key, ref, NULL);
  }
  

• NormalizeNode의 역할?

  • 이 역시도 잘 이해가 안되었었는데요…
  • 태그와 태그 사이에 올 수 있는 다양한 값들을 모두 ReactElement(VNode)로 리턴해야 하는데, null, undefined, boolean과 같은 요소들은 보이지 않도록 처리해야 하기 때문에 필요합니다.

  <div>
    {null}
    {undefined}
    {false}
    {"text"}
    {123}
    {[1, 2, <span />]}
    <Child />
  </div>
  

Render phase = Reconciliation + Diffing+ Fiber 생성

• 역할: createElement로 만들어진 VNode → Fiber(Instance)로 변환하는 과정
  • 이렇게 변환하는 이유?
    • React Element(VNode)는 렌더링에 필요한 정보가 없음
    • Fiber(Instance)는 이전 렌더링과 이후 렌더링을 비교하기 위한 자료구조로, 이전 렌더링 형상을 기억해둘 때 사용한다.
    • 이후 commit phase에서 이 내용을 기반으로 실제 DOM을 조작한다.
  • 추가로! Diffing 과정에서는 이전 Fiber와 새 ReactElement(VNode)를 비교한다~!
• 세부 과정: Reconciliation(beginWork + completeWork)
  • beginWork에서 하는 일: Element → Fiber 만들기(새 렌더에 대한 Fiber 만들기)
    • 새 fiber 만들지, 기존 fiber 재사용할지
    • fiber의 tag 결정(FunctionComponent, HostComponent, Fragment인지)
    • children reconcile
      • 새로운 childFiber만들거나 재사용
    • 이전 fiber와 diff 비교(type, props)
      • 이전 Fiber vs 새 React Element 비교
    • Placement/Deletion 플래그 등 결정
  • completeWork에서 하는 일
    • HostComponent면 DOM node를 생성
    • props가 변경되었는지 확인하고 diff를 updatePayloda로 만들어서 저장
    • 자식이 가진 effect를 부모로 끌어올려 effect list 구축
    • 여기서는 DOM 객체만 생성하고 화면에 붙이지는 않음!
      • 이렇게 하는 이유: Commit phase에서 한 번에 반영하기 위해서 render 단계에서 돔을 만들어 두기만 함. 이를 통해 리액트가 중단 가능한 렌더링 + 일관된 UI 업데이트를 동시에 가능

Commit(Mutation phase) - dom.ts

• Fiber 기반으로 변경사항을 DOM에 반영하는 과정

• 전체 과정

  beforeMutation → mutation → layout

beforeMutation Phase

• DOM이 변경되기 직전에 “현재 DOM 상태”를 읽을 수 있게 하는 과정