[P-Reinforce] Substantial Body Content Added to 15-Level React Mastery Wiki

React_Performance_Optimization.md

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