DIL: 모던 리액트 딥 다이브, 1주차-4

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week1-4_2024-03-07

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------ | ----------- | | 1주차 | 1, 2장 | 리액트 핵심요소와 자바스크립트 | 124p~143p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 점심 시간ㅠ 12시반~1시반
저녁 약속 이슈

---

JSX => JS

• 플러그인: @babel/plugin-transform-react-jsx

const ComponentA = <A required={true}>Hello</A>;

// @babel/plugin-transform-react-jsx
const ComponentA = React.createElement(A, { required: true }, "Hello");

// automatic runtime: React 17, 바벨 7.9.0 이후
const ComponentA = (0, _jsxRuntime.jsx)(A, { required: true, children: "Hello" });

• JSXElement를 첫 번째 인수로 선언해 요소를 정의한다
• 옵셔널인 JSXAttribute, JSXChildren, JSXString을 이후 인수로 전달한다

function TextOrHeading({
  isHeading,
  children,
}: PropsWithChildren<{ isHeading: boolean }>) {
  return createElement(
    isHeading ? "h1" : "p", // JSXElement
    { className: "text" }, // JSXAttribute (optional)
    children, // JSXChildren (optional)
  );
}

JSXNamespaceName, JSXMemberExpression은 React에서 사용하지 않는다

가상 DOM과 리액트 파이버

리액트의 특징: 실제 DOM이 아닌 가상 DOM을 사용해 렌더링을 최적화한다.
왜 만들었음? 어떻게 빠름? 개념은? 주의점은?

Document Object Model과 브라우저 랜더링

• DOM: 웹 페이지의 구조화된 표현을 제공하는 인터페이스

1. 브라우저가 사용자가 요청한 주소를 방문해 HTML을 받아온다
2. 브라우저 랜더링 엔진이 HTML을 파싱해 DOM 트리를 생성한다 (DOM 노드로 구성됨)
3. 2번 과정에서 CSS 파일을 받아온다
4. 브라우저 랜더링 엔진이 CSS를 파싱해 CSSOM 트리를 생성한다
5. 2번에서 만든 DOM 노드를 순회한다. 사용자의 눈에 보이는 노드를 방문한다.
6. 5번의 노드를 대상으로, 해당 노드의 CSSOM 노드를 찾아 적용한다.

• 레이아웃 Layout/reflow: 노드의 크기와 위치를 계산한다.
• 페인팅 Painting: 노드를 화면에 그린다.
  (레이아웃이 발생하면 페인팅도 발생한다)

브라우저 랜더링

• How browsers work: Behind the scenes of modern web browsers
• 블로그: How web browsers work - parsing the CSS

가상 DOM

레이아웃과 페인팅은 비용이 크다

• 사용자의 상호작용에 따라 레이아웃과 페인팅이 반복되어야 한다
• 레이아웃이 발생하면 페인팅도 발생한다
• 상위 노드의 레이아웃이 변경되면 하위 노드의 레이아웃도 변경된다

SPA의 경우

• 하나의 페이지에서 계속해서 레이아웃과 페인팅을 반복한다
• 라우팅이 발생하면, 헤더, 푸터 등을 제외한 대부분의 노드가 변경된다
• DOM의 변경 사항을 추적하고, 변경된 노드를 찾아 레이아웃과 페인팅을 반복한다

가상 DOM의 탄생

• react-dom이 관리하는 가상 DOM은 실제 DOM과 동일한 구조를 가진다
• 웹 페이지가 표시해야할 DOM을 메모리에 저장하고, 변경 사항을 추적한다

가상 DOM의 장점

• 댄 애브라모프(dan_abramov)-리액트 개발자: 일반 DOM을 관리하는 거보다 무조건 빠른 것이 아님. 애플리케이션을 개발할 수 있을 만큼의 합리적이고 빠른 방법을 제공.

리액트 파이버 React Fiber

• React Fiber: 자바스크립트 객체
• Fiber Reconciler: 가상 DOM을 관리
• reconcilation: 가상 DOM과 실제 DOM의 변경 사항을 비교하고, 변경 사항을 반영한다

리액트 파이버의 특징

리액트 파이버의 동작 방식

1. 작업을 작은 단위로 분할하고, 우선순위를 정한다
2. 렌더링을 중단하고, 다시 시작할 수 있다
3. 이전 작업을 다시 재사용하거나, 폐기할 수 있다

동기 & 비동기

• (동기) 과거 리액트의 조정 알고리즘은 stack을 사용했다 (싱글 스레드이므로 블로킹이 발생한다)
• (비동기) 리액트 파이버는 linked list를 사용해 작업을 분할하고, 우선순위를 정한다

작업 단위

• 파이버는 작업 단위로 구성, 작업을 처리하고, finishWork()라는 작업으로 마무리
• 작업을 커밋해 실제 DOM에 반영한다

리액트 파이버의 단계

1. 랜더 단계: 사용자에게 노출되지 않는 비동기 작업을 수행한다. (예: 데이터를 가져오는 작업, 레이아웃을 계산하는 작업)

• 이 단계에서 파이버: 우선순위를 정하거나, 중단 등

2. 커밋 단계: 실제 DOM에 반영한다

• commitWork()를 실행, 동기식으로 일어나고 중단될 수 없다

파이버 객체

• 컴포넌트가 최초로 마운트 되는 시점에 생성되어, 가급적 재사용됨

function FiberNode(tag, pendingProps, key, mode) {
  // Instance
  this.tag = tag; // HostComponent(div같은 요소), FunctionComponent, ClassComponent
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null; // 파이버 자체에 대한 reference 정보

  // Fiber (트리 구조)
  this.return = null;
  this.child = null; // 첫 번째 자식
  this.sibling = null; // 다음 형제
  this.index = 0; // 현재 자식의 인덱스
  this.ref = null;
  this.refCleanUp = null;

  this.pendingProps = pendingProps; // workInProgress에 대한 props
  this.memoizedProps = null; // pendingProps를 기반으로 렌더링된 이후의 props를 저장
  this.updateQueue = null; // 상태 업데이트, 콜백 함수, 이펙트 등을 저장
  this.memoizedState = null;
  this.dependencies = null;

  this.mode = mode;

  // Effects
  this.flags = NoFlags;
  this.subtreeFlags = NoFlags;
  this.deletions = null;

  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  this.alternate = null;

  // 이하 프로파일러, __DEV__
}

• state가 변경되거나, 생명주기 메서드가 호출되면, 파이버 객체가 업데이트된다
• 리액트가 파이버를 처리할 때, 파이버 객체를 참조해 작업을 수행한다
• 우선 순위에 따라 유연하게 작업을 처리할 수 있다

Value UI

• 값을 가지고 있는 UI를 관리하는 라이브러리
• UI를 문자열, 숫자, 배열 값으로 관리

리액트 파이버 트리

• 파이버 트리는 리액트 내부에 2개의 트리를 가지고 있다
• 현재 트리(Current)와 대체 트리(WorkInProgress)로 구성된다: 더블 버퍼링
• 더블 버퍼링?
  • 현재 트리를 사용자에게 노출하고, 대체 트리에 변경 사항을 적용한다
  • 변경 사항이 적용되면, 현재 트리와 대체 트리를 교체한다
  • 불완전한 트리를 보여주지 않기 위해, 커밋 단계에서 더블 버퍼링을 사용한다
• 동작
  • current을 기준으로 작업 시작
  • 업데이트가 발생하면, 리액트에서 받은 데이터로 workInProgress 트리 빌드
  • workInProgress 트리 빌드가 끝나면, 다음 랜더링에 사용
  • current가 workInProgress로 교체된다

파이버의 작업 순서: Depth-First Search

1. beginWork(): 파이버 작업을 시작한다, 자식이 없는 파이버를 만들 때까지 순회한다
2. 만약 형제가 없다면, completeWork(): 파이버 작업을 완료한다.
3. 만약 형제가 있다면, 형제로 이동한다
4. 2번, 3번이 끝나면 return을 찾아 올라가, 작업을 완료한다

• props를 받아 파이버 내부에서 작업을 수행한다
• 재귀 순회 트리 업데이트 과정 -> 과거 동기, 현재 비동기

우선 순위: 애니메이션 > 사용자 입력 > 데이터 가져오기 > 레이아웃 계산

파이버와 가상 DOM

• Fiber: 리액트 컴포넌트와 1:1
• 실제 DOM에 반영하는 것은 동기적으로 일어나야 하고, 처리량이 많아 -> 화면에 불완전하게 표시될 수 있는 가능성이 있다
  • 작업을 가상/메모리상에서 수행하고, 최종 결과물만 실제 브라우저에 적용하는 것이 가상 DOM
• 가상 DOM과 리액트의 핵심
  • 빠르게 랜더링하는 것이 아니라, 불완전한 화면을 사용자에게 보여주지 않는 것 / 바로 값으로 UI를 표현하는 것
  • 이런 흐름을 효율적으로 관리하기 위한 매커니즘