2nd/10_Wiki/Topics_Art/Performance Optimization.md

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 (RSC)**는 브라우저로 전송되는 자바스크립트 번들 크기를 '0 바이트'로 줄이고 서버 측 자원(DB 등)에 직접 접근하여 렌더링 된 HTML만을 스트리밍 형태로 클라이언트에 전달하므로, 클라이언트 측의 렌더링 및 하이드레이션(Hydration) 부하를 혁신적으로 제거합니다 [61-66].

🔗 Knowledge Connections

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

---

Last updated: 2026-04-25