---
title: 리액트 렌더링 최적화 전략
category: Software Architecture
tags: [Performance, Memoization, React.memo, 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 Colocation)**:
    - 전역 상태가 바뀔 때마다 앱 전체가 들썩이지 않게 하라. 상태는 그것을 사용하는 가장 하위 컴포넌트 근처로 내려라.

## ⚠️ 모순 및 업데이트 (RL Update)
- 모든 곳에 `memo`를 쓰는 것은 메모리 낭비다. 리액트의 기본 렌더링 성능은 이미 매우 뛰어나다. 병목 현상이 '실제로 관측'될 때만 최적화를 적용하는 것이 원칙이다.

## 🔗 지식 연결 (Graph)
- Related: [[WebWorker_Performance|WebWorker_Performance]] , [[System_Debugging_Protocol|System_Debugging_Protocol]]
- Foundation: [[React_Mental_Model|React_Mental_Model]]