React 성능 최적화: 느림에서 번개처럼 빠르게

Source: Dev.to

프로파일 먼저 — 추측하지 마세요

React DevTools Profiler를 사용해 실제 병목 현상을 찾아보세요:

1. Profiler 탭을 엽니다.
2. 인터랙션을 기록합니다.
3. 어떤 컴포넌트가 다시 렌더링됐는지, 그리고 그 이유를 확인합니다.

메모이제이션

컴포넌트 메모이제이션

import { memo } from "react";

const ExpensiveChart = memo(function ExpensiveChart({
  data,
  width,
  height,
}: ChartProps) {
  // Only re‑renders when props actually change
  return ;
});

값 메모이제이션

import { useMemo } from "react";

const summary = useMemo(() => ({
  total: transactions.reduce((sum, t) => sum + t.amount, 0),
  byCategory: groupBy(transactions, "category"),
}), [transactions]);

Note: React 19는 빌드 시 자동 메모이제이션을 도입해, 새로운 코드에서는 memo/useMemo/useCallback을 수동으로 사용할 필요가 거의 없습니다. 실험용 컴파일러 플래그 { reactCompiler: true }를 활성화하면 됩니다.

코드 스플리팅 및 레이지 로딩

import { lazy, Suspense } from "react";

const DataViz = lazy(() => import("./DataVisualization"));

function Dashboard() {
  return (
    }>
      
    
  );
}

긴 리스트 가상화

보이는 아이템만 렌더링합니다. 100개 이상의 아이템이 있는 리스트는 @tanstack/react-virtual을 사용하세요. 가상화 오버헤드는 수천 개의 DOM 노드를 렌더링하는 비용에 비해 무시할 수 있습니다.

상태 관리

가장 효과적인 기법은 상태를 가능한 한 사용되는 위치에 가깝게 두는 것입니다. 자주 변하는 전역 상태는 전체 트리를 다시 렌더링하게 만듭니다.

추가 최적화

• 무거운 라우트를 코드 스플릿하여 초기 번들 크기를 줄입니다.
• next/image 또는 레이지 로딩으로 이미지를 최적화합니다.
• useDeferredValue를 사용해 긴급하지 않은 업데이트를 지연시킵니다.
• React Compiler(React 19)를 활성화해 자동 최적화를 활용합니다.
• 아키텍처(상태 위치, 데이터 흐름)에 집중하고 마이크로 최적화는 최소화합니다; 잘 설계된 앱은 기본적으로 빠릅니다.

빠른 체크리스트

• 먼저 프로파일링 — 추측하지 마세요.
• 상태를 함께 배치 — 트리 아래쪽으로 이동합니다.
• 긴 리스트를 가상화(100개 이상).
• 무거운 라우트를 코드 스플릿.
• 이미지를 최적화(next/image 또는 레이지 로딩).
• 긴급하지 않은 업데이트를 지연(useDeferredValue).
• React 19에서 React Compiler 활성화.
• 마이크로 최적화보다 아키텍처에 우선순위 부여.

---

85개 이상의 무료 개발자 도구를 탐색하거나 이 작업을 지원해 주세요.