React[리액트 19] 6편. React 우선순위 관리
React 우선순위 관리 React 내부에서는 우선순위 관리를 위한 타입은 기능에 따라 Lane 우선순위, Scheduler 우선순위, Event 우선순위 3가지로 나뉩니다. fiber 우선순위(LanePriority) : React-reconciler 패키지에 존재, ReactFiberLane.js 파일 스케줄링 운선순위(SchedulerPriority): Scheduler 패키지에 존재, SchedulerPriorities.js 파일 Event 우선순위(ReactEventPriorities): React-reconciler 패키지에 존재, ReactEventPriorities.js 파일 React 팀은 지속적으로 효율적인 렌더링 구현에 노력해왔으며, 그 중 2개의 매우 유명한 발표가 있습니다 2017년 Lin Clark이 fiber 아키텍처와 중단 가능한 렌더링을 소개했습니다. 2018년 Dan이 JSConf이 시간 분할(time slicing)과 비동기 렌더링(suspense) 등의 특성을 더 자세히 소개했습니다. 발표에서 보여준 중단 가능한 렌더링, 시간 분할(time slicing), 비동기 렌더링(suspense) 등의 특성들이 소스코드에서 구현되는 것은 모두 우선순위 관리에 의존합니다. scheduling 함수 Lane export const TotalLanes = 31; export const NoLanes: Lanes = // 0b0000000000000000000000000000000; export const NoLane: Lane = // 0b00000000000000000000000000...2025-05-22✏️ 작성중...
React[리액트 19] 5편. React의 시작 과정
React의 시작 과정 4편에서는 React 흐름의 핵심인 reconciler의 동작 흐름을 4단계로 정리해봤습니다. 5편에서는 React 애플리케이션의 시작 과정을 설명하고자 합니다. 이 과정은 4편의 입력 단계에 해당하며 react-dom 패키지에 대한 설명입니다. 우선 본격적인 분석에 앞서 React 앱의 시작 방식에 대해 설명드리겠습니다. React 19버전 기준으로는 크게 2가지(Legacy, Concurrent) 입니다. React 19 모드들 소스코드 1.1 Legacy 모드 (React 16~18 버전에서 사용) React 19.1에서 render 함수 소스코드 ReactDOM.render(, document.getElementById('root'), (dom) => {}); // 콜백 함수 지원, 매개변수로는 DOM 객체가 전달됨 1.2 Concurrent 모드 (React 18부터 본격 사용) React 19 부터는 기본으로 사용되는 모드입니다. 여러 컴포넌트들을 Concurrent하게 렌더링할 수 있습니다. import { createRoot } from 'react-dom/client' // const reactDOMRoot = createRoot(document.getElementById('root')); // reactDOMRoot.render(); // 콜백 미지원 진입 함수 render을 하기 전까지는 DOM 요소와 (리액트 엘리먼트, createElement로 변환된 것) 사이에는 아무런 연결관계가 존재하지 않습니다. 그리고 React의 시작은 react-dom 패키지에서 ...2025-05-06
React[리액트 19] 4편. Reconciler 동작 흐름
4편. Reconciler 동작 흐름 지금까지 거시적인 패키지 구조와 주요 두 작업루프에 대한 설명을 통해 react-reconciler 패키지에 대해 어느 정도 이해했습니다. 4편에서는 react-reconciler 패키지의 주요 역할을 정리하며 주요 기능들을 4가지로 나눠서 설명하겠습니다. 입력: schedulerUpdateOnFiber와 같은 API 함수를 외부에 노출하여, react 패키지 등 다른 패키지에서 호출할 수 있도록 합니다. 스케줄링 Task 등록: scheduler 패키지와 상호작용하여 task를 등록하고 콜백을 기다립니다. task 콜백 실행: fiber 트리를 구성하고, 동시에 렌더러(react-dom 또는 react-native)와 상호작용하여 fiber에 대응하는 DOM 노드를 생성합니다. 출력: 렌더러와 상호작용하여 실제 DOM 노드를 렌더링합니다. (커밋) 위 1~4번 과정을 그림에서 나타냈습니다. (ReactFiberWorkLoop.js, ReactFiberRootScheduler.js) ReactFiberWorkLoop.js에서 입력을 담당하는 sccheduleUpdateOnFiber 뿐입니다. react-reconciler 패키지에서 외부에 노출되는 api 함수들 중에서 fiber를 변경해야 하는 작업이 포함된다면 모두다 최종적으로는 scheduleUpdateOnFiber를 호출하게 됩니다. 따라서 scheduleUpdateOnFiber 함수는 입력 흐름에서 반드시 거쳐야 하는 경로입니다. export function scheduleUpdateOnFiber( root: ...2025-04-30
React[리액트 19] 3편. React에서 자주 사용되는 객체
3편. React에서 자주 사용되는 객체 React에는 다양한 객체와 데이터 구조가 등장합니다. 2편에서 소개한 fiber tree나 WorkLoop의 time min-heap 자료구조인 task schedule queue가 그 예시들 입니다. 3편에서는 리액트가 시작되고 렌더링될때 까지 자주 등장하는 중요한 객체들을 패키지별로 정리해보려 합니다. react 패키지는 ReactElement(리액트 엘리먼트)를 생성하는 필수 함수들과 API를 제공합니다. 예를 들면 다음과 같은 JSX 문법들은 모두 ReactElement를 생성하는 createElement로 Babel 플러그인에 의해 바뀝니다. ReactDOM.createRoot(document.getElementById('root')).render(); // => React.createElement(App,{}) // React.createElement("div",null) 1.1 ReactElement ReactElement 객체는 보통 JSX 문법이 React.createElement로 변환되어 생성됩니다. export type ReactElement = { $$typeof: any, type: any, // 노드 종류 (일반 DOM 노드[div, span,...], 리액트 컴포넌트[함수형, 클래스형, Portal, Fragment,Provider,Consumer]) key: any, // diff 알고리즘에 사용(변경됐는지 확인) ref: any, props: any, // or for string refs _owner: ...2025-04-28
React[리액트 19] 2편. React WorkLoop
React WorkLoop 1편에서 React 핵심 패키지 간의 의존성과 호출 관계를 그림을 그리며 소개했습니다. 개요도에는 2개의 WorkLoop를 볼 수 있는데, 각각 scheduler와 react-reconciler 패키지에 있습니다. 2편에서는 두 루프에 대해서 설명하려고 합니다. 이 글에선 두 루프는 각각 작업 스케줄 루프(Scheduler.js)와 fiber 구성 루프(ReactFiberWorkLoop.js)라고 표현하겠습니다. 자세한 소스 코드 분석은 scheduler의 스케줄링 매커니즘과 fiber 트리 구성에 관하여 다룰 때 설명하고, 거시적 관점에서 분석하겠습니다. 1.1 작업 스케줄 루프 (Scheduler workLoop) 작업 스케줄 루프는 React 앱이 동작하기 위한 핵심입니다. 반복적으로 호출되는 모든 작업(task)의 스케줄을 우선순위에 따라 제어합니다. 우선순위에 따라 expiration time이 결정되고, 이값을 기준으로 min-heap 정렬이 적용됩니다. 1.2 fiber 구성 루프 (fiber workLoop) fiber 구성 루프는 fiber 트리의 구성을 제어하며, 전체 과정은 DFS(깊이 우선 탐색)으로 이루어집니다. 1.3 두 루프의 공통점, 차이점, 연관성 공통점 두 루프는 javaScript 소스 코드 상에서 실행 시점에서도 클로저 형태를 유지하고 있습니다. 내부에 정의된 전역 변수들은 해당 Scope의 private 변수이며 앱 실행을 제어하는 변수로 사용됩니다. 차이점 작업 스케줄 루프는 이진 힙 구조를 기반으로 힙의 루트 노드를 반복 실행하다가 힙이 비워...2025-04-09
React[리액트 19] 1편. 패키지 구조
React 패키지 구조 (웹 개발) 혼자서 리액트 코드도 뜯어보고, 잘 만들어진 중국어 리액트 설명도 많이 차용했습니다. 설명이 틀릴 수도 있지만, 최대한 맞는 설명이 되도록 많이 자료를 찾아보고 코드도 보면서 만들었으니 도움이 되시면 좋겠습니다. 현재 댓글 기능이 없어서 크로스 체크가 불가 합니다. 얼른 댓글 관리할 수 있는 백오피스를 만들어 함께 의견을 공유할 수 있도록 노력하겠습니다. 리액트 프로젝트는 packages 디렉토리에 총 37개(@19.1.0 기준)의 패키지가 있습니다. 이 중 웹 개발을 위해 사용자가 설치하는 기본 패키지는 2개이고 기본 패키지를 구현하는데 필요한 내부 구현 패키지가 4개가 있습니다. 사용자가 설치하는 기본 패키지는 react, react-dom 패키지입니다. 내부 구현 패키지로 shard, react-dom-bindings, react-reconciler, scheduler 4개가 있습니다. 1.1 react 패키지 React의 기본 패키지로 React Component(React Element)를 정의하는 데 필요한 핵심 함수들만을 제공합니다. 단독으로는 사용되지 않고, 보통 Renderer(react-dom, react-native)과 함께 사용합니다. React 애플리케이션 작성 시 대부분 이 패키지의 API를 사용합니다. 1.2 react-dom 패키지 Renderer 중 하나로, React와 플랫폼(브라우저) 간의 연결 다리 역할을 합니다. Browser나 Node.js 환경에서 사용할 수 있습니다. 내부 구현 패키지로 react-dom-bindings를 사용합니다...2025-04-08