2nd/10_Wiki/Topics/React_Performance_Optimization.md

title, category, tags, created

title	category	tags	created
리액트 렌더링 최적화 전략	Dev	Performance Memoization React.memo Optimization|Optimization	2026-04-20

React_Performance_Optimization (리액트 성능 최적화)

📌 한 줄 통찰 (The Karpathy Summary)

가장 빠른 렌더링은 '하지 않는 렌더링'이다. 필요 없는 업데이트를 차단하고 데이터가 흐를 때만 화면이 출렁이게 하라.

📖 구조화된 지식 (Synthesized Content)

• Memoization (메모이제이션):
  • React.memo: 상위 컴포넌트가 변해도 내 Props가 같다면 그리기를 거부한다.
  • useMemo: 비용이 큰 연산 결과(예: 복잡한 필터링)를 저장해두고 재사용한다.
  • useCallback: 함수 객체의 변동을 막아 자식 컴포넌트의 불필요한 리렌더링을 방지한다.
• Windowing (가상 리스트):
  • 수천 개의 리스트 아이템이 있어도 사용자의 눈에 보이는 수십 개만 실제 DOM에 렌더링한다. (예: react-window, react-virtualized).
• 상태의 위치 선정 (State Colocation):
  • 전역 상태가 바뀔 때마다 앱 전체가 들썩이지 않게 하라. 상태는 그것을 사용하는 가장 하위 컴포넌트 근처로 내려라.

⚠️ 모순 및 업데이트 (RL Update)

• 모든 곳에 memo를 쓰는 것은 메모리 낭비다. 리액트의 기본 렌더링 성능은 이미 매우 뛰어나다. 병목 현상이 '실제로 관측'될 때만 최적화를 적용하는 것이 원칙이다.

🔗 지식 연결 (Graph)

• Related: WebWorker_Performance , System_Debugging_Protocol
• Foundation: React_Mental_Model