# [[Performance Optimization|Performance Optimization]]

## 📌 Brief Summary
성능 최적화(Performance Optimization)는 웹 애플리케이션의 로딩 속도를 단축시키고 사용자 상호작용을 매끄럽게 만들기 위해 브라우저 렌더링 과정과 리소스 처리 방식을 개선하는 일련의 기술적 과정입니다 [1-3]. 주로 초기 렌더링 시간(Fast First Paint)을 앞당기고, 프레임 드롭(Jank)을 방지하며, 최대 콘텐츠풀 페인트(LCP)와 같은 핵심 웹 바이탈(Core Web Vitals) 지표를 향상하는 것을 목표로 합니다 [2-6]. 모던 프론트엔드에서는 중요 렌더링 경로(CRP)의 최소화, React와 같은 프레임워크 수준에서의 불필요한 렌더링 방지, 그리고 적절한 서버/클라이언트 렌더링 전략(SSR, SSG 등)의 선택을 통해 이루어집니다 [1, 7-9].

## 📖 Core Content
*   **중요 렌더링 경로(CRP) 최적화 및 브라우저 렌더링 제어**
    *   브라우저가 HTML, CSS, JavaScript를 화면의 픽셀로 변환하는 '중요 렌더링 경로(Critical Rendering Path)'를 최적화하는 것이 가장 기본입니다 [1, 10]. 초기 렌더링 속도를 높이기 위해 렌더링을 차단하는 리소스를 지연시키거나 제거하며, 불필요한 DOM 노드의 깊이를 최소화해야 합니다 [8, 11, 12].
    *   특히 계산 비용이 큰 레이아웃 재계산인 **리플로우(Reflow)**를 유발하는 속성(예: width, height, margin 조작) 사용을 최소화하고, 시각적 속성만 변경하는 리페인트(Repaint)나 GPU 가속 기반의 컴포지팅(Compositing) 기법을 활용하여 성능 저하를 방지해야 합니다 [6, 12-20].

*   **React 프레임워크 레벨의 최적화 기법**
    *   **리렌더링 폭포수(Re-render Cascade) 방지:** 부모 컴포넌트의 상태 변화가 무관한 자식 컴포넌트들의 렌더링까지 유발하는 것을 막기 위해 `React.memo`, `useMemo`, `useCallback`을 사용하여 얕은 비교를 통한 메모이제이션을 수행합니다 [21-25]. 
    *   **자동 일괄 처리 (Automatic Batching):** React 18부터 도입된 기능으로, 네이티브 이벤트 핸들러뿐만 아니라 비동기 작업(Promise, setTimeout 등) 내에서 발생하는 여러 상태 업데이트들을 하나로 묶어(Batching) 단 한 번의 리렌더링만 발생하도록 하여 렌더링 성능을 극대화합니다 [26-33].
    *   **동시성 렌더링 (Concurrent Rendering):** `useTransition` 및 `useDeferredValue` 훅을 사용하여 무거운 연산을 후순위로 미루고(Non-urgent), 사용자의 타이핑이나 클릭 같은 긴급한 상호작용(Urgent)을 우선적으로 처리함으로써 UI가 멈추는 현상을 방지합니다 [34-38].
    *   **가상화 및 코드 분할:** 수백 개 이상의 긴 목록은 화면에 보이는 항목만 DOM 노드로 생성하는 가상화(Virtualization)를 적용하며 [39, 40], `React.lazy()`를 활용한 라우트 수준의 코드 분할(Code Splitting)로 초기 자바스크립트 번들 크기를 줄여 LCP 점수를 개선합니다 [41].

*   **아키텍처 및 렌더링 전략 최적화**
    *   애플리케이션 특성에 맞춰 **CSR(클라이언트 사이드 렌더링)**, **SSR(서버 사이드 렌더링)**, **SSG(정적 사이트 생성)**, **ISR(점진적 정적 재생성)** 등을 적절히 선택하거나 혼합(Hybrid)하여 사용합니다 [42-60]. 
    *   최근 도입된 **[[React Server Components|React Server Components]] (RSC)**는 브라우저로 전송되는 자바스크립트 번들 크기를 '0 바이트'로 줄이고 서버 측 자원(DB 등)에 직접 접근하여 렌더링 된 HTML만을 스트리밍 형태로 클라이언트에 전달하므로, 클라이언트 측의 렌더링 및 하이드레이션(Hydration) 부하를 혁신적으로 제거합니다 [61-66].

## 🔗 Knowledge Connections
- **Related Topics:** [[Critical Rendering Path|Critical Rendering Path]], [[Reflow and Repaint|Reflow and Repaint]], [[Automatic Batching|Automatic Batching]], [[React Compiler|React Compiler]], [[Virtual DOM|Virtual DOM]], [[Server-Side Rendering (SSR)|Server-Side Rendering (SSR)]], [[React Server Components|React Server Components]]
- **Projects/Contexts:** [[React 18 Concurrent Features|React 18 Concurrent Features]], [[Next.js App Router|Next.js App Router]]
- **Contradictions/Notes:** 과거에는 개발자가 수동으로 `useMemo`나 `useCallback`, `React.memo`를 삽입하여 불필요한 리렌더링을 최적화해야 했으나, 최근 안정화된 **React Compiler**는 빌드 타임에 코드와 데이터 흐름을 분석하여 이러한 메모이제이션 경계를 자동으로 삽입해 줍니다. 따라서 이제 수동 메모이제이션은 컴파일러의 자동 처리에 의존하게 되어 대부분 제거될 수 있으나, 효과적인 의존성 제어나 서드파티 라이브러리 통합 등 특수한 예외 상황의 '비상 탈출구(Escape Hatch)' 용도로만 제한적으로 남게 됩니다 [25, 67-72].

---
*Last updated: 2026-04-25*