React optimization

종합 정리

구분	목적	주요 이점
React.lazy / Suspense	코드 스플리팅	초기 번들 크기 축소, 초기 렌더링 속도 향상
useMemo	값 메모이제이션	복잡한 계산 재실행 방지
useCallback	함수 메모이제이션	불필요한 함수 재생성 방지
React.memo	컴포넌트 메모이제이션	불필요한 리렌더링 방지

정리 문장: React 애플리케이션은 코드 스플리팅(lazy, Suspense)을 통해 초기 번들 크기를 줄이고, 메모제이션(useMemo, useCallback, React.memo)을 통해 리렌더링 최소화 및 성능 최적화를 달성할 수 있다.

---

🎯 1. 코드 스플리팅 (Code Splitting)

1-1. React.lazy

• 설명: 컴포넌트를 필요할 때만 동적으로 로드하여 초기 번들 크기를 줄임
• 효과: 초기에 불필요한 코드가 로드되지 않아 렌더링 속도 개선

const LazyComponent = React.lazy(() => import('./LazyComponent'));

1-2. Suspense

• 설명: React.lazy와 함께 사용하여 로딩 중 UI 표시
• fallback 속성을 사용해 사용자에게 로딩 상태 제공

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

🧩 요약: 코드 스플리팅을 통해 애플리케이션 초기 로드 시 필요한 코드만 가져오므로, 렌더링 속도 향상 + 네트워크 효율성을 동시에 달성할 수 있다.

---

⚙️ 2. 메모제이션 (Memoization)

2-1. useMemo

• 설명: 특정 연산의 결과를 캐싱하여 불필요한 재계산을 방지
• 사용 예: 계산 비용이 높은 연산을 수행할 때 유용

const computedValue = useMemo(() => {
  return expensiveCalculation(data);
}, [data]);

👉 data가 변경될 때만 expensiveCalculation()이 재실행됨

---

2-2. useCallback

• 설명: 함수를 메모이제이션하여, 불필요한 함수 재생성 방지
• 사용 예: 자식 컴포넌트에 콜백 전달 시 매번 새로 생성되는 함수로 인한 리렌더링 방지

const memoizedCallback = useCallback(() => {
  doSomething();
}, [dependencies]);

👉 dependencies가 변경되지 않는 한 동일한 함수 인스턴스를 재사용

---

2-3. React.memo

• 설명: props가 변경되지 않으면 컴포넌트의 리렌더링을 방지
• 사용 예: 동일한 props로 반복 렌더링되는 프리젠테이션 컴포넌트에 사용

const Child = React.memo(({ value }) => {
  console.log('렌더링됨');
  return <div>{value}</div>;
});

---