React에서 성능 최적화 전략 – 렌더링 줄이기, memo, lazy, Suspense

 

React 앱이 커지면 렌더링 비용이 늘어나면서 성능이 저하될 수 있습니다. 이번 글에서는 불필요한 렌더링을 줄이고, 컴포넌트 로딩을 지연시켜 성능을 개선하는 방법들을 정리해보겠습니다.

1. React.memo로 불필요한 렌더링 막기

React.memo는 컴포넌트의 props가 바뀌지 않는 한 렌더링을 건너뜁니다.

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

• 순수 함수 컴포넌트에 사용
• props가 같다면 다시 렌더링되지 않음

2. useMemo로 계산 결과 캐싱하기

복잡한 연산 결과를 캐싱하여 렌더링 성능을 높일 수 있습니다.

const sortedList = useMemo(() => {
  return heavySort(list);
}, [list]);

3. useCallback으로 함수 캐싱하기

props로 전달되는 함수를 메모이제이션하여 자식 컴포넌트가 리렌더링되지 않도록 합니다.

const handleClick = useCallback(() => {
  console.log('클릭');
}, []);

4. 코드 스플리팅 – React.lazy와 Suspense

모든 컴포넌트를 한 번에 로딩하지 않고, 필요한 시점에 로딩하는 방식입니다.

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

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

• lazy: 컴포넌트를 지연 로딩
• Suspense: 로딩 중 보여줄 UI 정의

5. 기타 성능 최적화 팁

• 리스트 렌더링 시 key를 고유하게 설정
• 불필요한 state 분리하여 영향 범위 최소화
• 컴포넌트를 나누어 책임 분리

6. 마무리

React의 성능 최적화는 렌더링을 언제, 어떻게 줄일 것인가에 대한 고민에서 시작됩니다. memo, useMemo, useCallback, lazy 등을 적절히 활용하면 사용자는 더 빠르고 부드러운 UX를 경험할 수 있습니다.