동찬 코드 일지

Fiber”아키텍처” Fiber는 React 내부의 렌더링 아키텍처이자 자료구조이 Fiber에서 수행하는 작업은 크게 2가지이다.Render phase= 리컨실리에이션(Reconciliation) 역할 : “무엇이 바뀌었는가” 계산 → “비동기” 가능비동기 렌더링의 효과이 비동기의 특성으로 최적의 사용자 경험을 제공 가능끊김 최소화렌더링 중이라도 메인 스레드를 완전히 점유하지 않기 때문에 스크롤, 입력, 애니메이션 등 사용자 인터랙션이 부드럽게 유지성능 최적화재 실행 및 중단 가능렌더링이 오래 걸리면 중간에 작업을 일시 중단즉, React는 렌더링을 협조적 스케줄링(Cooperative Scheduling) 으로 처리한다.브라우저가 한 프레임을 그린 뒤 다시 이어서 렌더링할 수 있다.JavaScript의..

fiber → React 16 버전부터 이전 Stack 구조에서 변경됨 학습 자료 출처https://goidle.github.io/react/in-depth-react-intro/ React 톺아보기 - 02. Intro | Deep Dive Magic Code모든 설명은 v16.12.0 버전 함수형 컴포넌트와 브라우저 환경을 기준으로 합니다. 버전에 따라 코드는 변경될 수 있으며 클래스 컴포넌트는 설명에서 제외됨을 알려 드립니다. 이번 포스트에서는goidle.github.io React Package 구성 요소ReactSharedSchedulerReconcilerRender phaseVDOM 조작 단계Commit phaseender phase에서 재조정된 VDOM을 DOM에 적용하고 라이프 사이클을 실..

성능 = 사용자가 느끼는 경험이 ‘빠르고’, ‘매끄럽고’, ‘안정적인’ 상태 성능은 다음과 같은 요소들로 이루어진다.초기 로딩 시간: 사용자가 페이지에 접속했을 때 첫 화면이 나타나고 상호작용 가능해지는 시간(FP, FCP, TTI 등).렌더링/재렌더링 효율: 상태나 props가 바뀔 때 불필요하게 많은 컴포넌트가 리렌더되지 않고 최적의 부분만 렌더 여부.상호작용 응답성: 예를 들어 버튼 클릭시 반응이 지연되면 성능이 나쁘다고 느껴진다. (FID, Input latency)UI 유동성/애니메이션: 스크롤, 드래그, 애니메이션이 끊기지 않고 매끄럽게 실행되는지 여부.네트워크/데이터 처리 효율: API 호출, 데이터 파싱, 리소스 최적화(CDN/캐시) 등이 적절하게 되어 있는지 분석.메모리/리소스 낭비 여부..