Antigravity Agent
42 lines
5.7 KiB
Markdown
42 lines
5.7 KiB
Markdown
---
|
|
id: [[P-Reinforce|P-Reinforce]]-AUTO-B068E2
|
|
category: "10_Wiki/💡 Topics/Design & Experience"
|
|
confidence_score: 0.90
|
|
tags: [auto-reinforced]
|
|
last_reinforced: 2026-04-20
|
|
github_commit: "[P-Reinforce] Continuous Worker - React Performance [[Optimization|Optimization]]"
|
|
---
|
|
|
|
# [[React Performance Optimization|React Performance Optimization]]
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> React 애플리케이션에서 불필요한 렌더링을 줄이고, 자바스크립트 번들 크기를 최소화하며, 상태 관리 및 렌더링 파이프라인을 효율적으로 구성하여 빠르고 매끄러운 사용자 경험(UX)과 우수한 [[Core Web Vitals|Core Web Vitals]] 지표를 달성하는 핵심 기술 및 아키텍처 전략입니다.
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
**1. 렌더링 파이프라인과 재조정([[Reconciliation|Reconciliation]]) 최적화** React는 상태(State), 프롭스(Props), 컨텍스트(Context) 변경 시 혹은 부모 컴포넌트가 렌더링될 때 재렌더링을 수행합니다. 불필요한 하위 컴포넌트의 렌더링을 막기 위해 `React.memo`, `useMemo`, `useCallback`을 사용하여 참조 안정성(Reference Stability)을 유지합니다. 최신 React 19의 '[[React Compiler|React Compiler]]'를 도입하면 대부분의 메모이제이션이 빌드 타임에 자동으로 처리되어 수동 최적화 보일러플레이트 코드를 획기적으로 줄일 수 있습니다.
|
|
|
|
**2. 코드 스플리팅(Code Splitting)과 지연 로딩(Lazy Loading)** 하나의 거대한 자바스크립트 번들은 초기 로딩 속도를 크게 저하시킵니다. `React.lazy`와 `Suspense`를 활용하여 라우트(Route) 기반 또는 무거운 컴포넌트(예: 차트, 비디오 에디터) 단위로 번들을 분할하면 초기 다운로드 용량을 줄여 앱의 반응 속도(TTI, Time to Interactive)를 높일 수 있습니다.
|
|
|
|
**3. 효율적인 상태 관리 (State [[Management|Management]])** 상태는 부모로 과도하게 끌어올리지(State Lifting) 않고 최대한 사용하는 곳과 가까운 위치(Local)에 두어야 합니다. React 기본 [[Context API|Context API]]는 내부의 어떤 값이라도 변경되면 모든 소비자를 리렌더링시키므로 병목을 유발하기 쉽습니다. 따라서 고빈도로 업데이트되는 상태의 경우 컨텍스트를 도메인별로 잘게 쪼개거나, Zustand, Jotai, Valtio와 같이 선택적 구독(Selective Subscription)과 미세 조정(Fine-grained) 업데이트를 지원하는 고성능 전역 상태 관리 라이브러리를 도입하는 것이 유리합니다.
|
|
|
|
**4. 대규모 리스트 가상화 (Virtualization / Windowing)** 수천 개의 항목을 한 번에 렌더링하면 DOM 노드가 폭증하여 브라우저가 멈출 수 있습니다. `react-window`나 `react-virtualized` 같은 라이브러리를 사용하여 현재 화면(Viewport)에 보이는 수십 개의 항목만 렌더링하고 나머지는 스크롤 시 동적으로 마운트하는 '가상화' 기법을 적용하면 렌더링 시간을 수 밀리초(ms) 단위로 줄일 수 있습니다. 이때 안정적이고 고유한 `key` 속성을 부여하는 것도 매우 중요합니다.
|
|
|
|
**5. 동시성 기능(Concurrent Features)과 비동기 처리** [[React 18|React 18]] 이상에서 제공하는 `useTransition`과 `[[useDeferredValue|useDeferredValue]]` 훅을 사용하면 무거운 UI 업데이트를 비긴급(Non-urgent) 작업으로 미루고, 사용자의 타이핑이나 클릭 같은 긴급한 인터랙션을 끊김 없이 즉각적으로 처리할 수 있습니다. 더 나아가 이미지 처리나 물리 연산 등 CPU를 많이 소모하는 작업은 Web Worker(또는 `useWorker`)로 오프로딩하여 메인 스레드의 블로킹을 방지합니다.
|
|
|
|
**6. [[React Server Components (RSC)|React Server Components (RSC]] 활용** Next.js와 같은 프레임워크 환경에서는 [[React Server Components|React Server Components]]를 적극 활용합니다. 인터랙션이 필요 없는 정적 UI는 서버에서 렌더링을 끝마친 채로 전송하여 클라이언트 측 자바스크립트 번들 사이즈를 획기적으로 줄이고 초기 페인팅 속도를 비약적으로 향상시킵니다.
|
|
|
|
## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
|
|
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
|
|
- **정책 변화:** Design & Experience 분야의 자동 자산화 수행.
|
|
|
|
## 🔗 지식 연결 (Graph)
|
|
- **Related Topics:** [[React 19 Compiler|React 19 Compiler]], 재조정 (Reconciliation), 상태 관리 최적화 (Zustand, Jotai, Valtio), Code Splitting & Lazy Loading, [[React Server Components (RSC)|React Server Components (RSC]]
|
|
- **Projects/Contexts:** 대규모 E-commerce 및 대시보드 애플리케이션 구축, [[고성능 멀티스레드 React 앱 아키텍처|고성능 멀티스레드 React 앱 아키텍처]], Next.js 기반 App Router 마이그레이션
|
|
- **Contradictions/Notes:** 많은 개발자들이 컴포넌트가 느려지면 습관적으로 `useMemo`나 `React.memo`를 추가(Premature Memoization)하지만, 메모이제이션 자체에도 얕은 비교(Shallow Compare)라는 오버헤드가 발생합니다. 렌더링 자체가 빠르고 프롭스 변경이 빈번한 단순 컴포넌트에 이를 남용하면 오히려 메모리와 연산 자원만 낭비하므로 반드시 React DevTools Profiler로 측정한 후 적용해야 합니다. 또한 React 19 컴파일러가 아무리 자동화를 해주어도, 무분별한 상태 구조 등 근본적인 아키텍처 설계 결함을 고쳐주지는 않습니다.
|
|
|
|
---
|
|
|
|
_Last updated: 2026-04-14_
|
|
|
|
---
|