Antigravity Agent
29 lines
1.8 KiB
Markdown
29 lines
1.8 KiB
Markdown
---
|
|
title: 리액트 렌더링 최적화 전략
|
|
category: Dev
|
|
tags: [Performance, Memoization, React.memo, [[Optimization|Optimization]]]
|
|
created: 2026-04-20
|
|
---
|
|
|
|
# [[React_Performance_Optimization|React_Performance_Optimization]] (리액트 성능 최적화)
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> 가장 빠른 렌더링은 '하지 않는 렌더링'이다. 필요 없는 업데이트를 차단하고 데이터가 흐를 때만 화면이 출렁이게 하라.
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
- **Memoization (메모이제이션)**:
|
|
- **React.memo**: 상위 컴포넌트가 변해도 내 Props가 같다면 그리기를 거부한다.
|
|
- **useMemo**: 비용이 큰 연산 결과(예: 복잡한 필터링)를 저장해두고 재사용한다.
|
|
- **useCallback**: 함수 객체의 변동을 막아 자식 컴포넌트의 불필요한 리렌더링을 방지한다.
|
|
- **Windowing (가상 리스트)**:
|
|
- 수천 개의 리스트 아이템이 있어도 사용자의 눈에 보이는 수십 개만 실제 DOM에 렌더링한다. (예: `react-window`, `react-virtualized`).
|
|
- **상태의 위치 선정 ([[State|State]] Colocation)**:
|
|
- 전역 상태가 바뀔 때마다 앱 전체가 들썩이지 않게 하라. 상태는 그것을 사용하는 가장 하위 컴포넌트 근처로 내려라.
|
|
|
|
## ⚠️ 모순 및 업데이트 (RL Update)
|
|
- 모든 곳에 `memo`를 쓰는 것은 메모리 낭비다. 리액트의 기본 렌더링 성능은 이미 매우 뛰어나다. 병목 현상이 '실제로 관측'될 때만 최적화를 적용하는 것이 원칙이다.
|
|
|
|
## 🔗 지식 연결 (Graph)
|
|
- Related: [[WebWorker_Performance|WebWorker_Performance]] , [[System_Debugging_Protocol|System_Debugging_Protocol]]
|
|
- Foundation: [[React_Mental_Model|React_Mental_Model]]
|