[React] React 성능 최적화 방법

 

React.memo()로 불필요한 리렌더링 방지

함수형 컴포넌트에서 얕은 비교를 통해 불필요한 렌더링을 막을 수 있다.

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  // 커스텀 비교 로직 구현 가능
  return prevProps.value === nextProps.value;
});

 

useMemo()로 복잡한 계산 최적화

비용이 높은 계산을 메모이제이션하여 불필요한 재계산을 방지한다.

const memoizedValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

 

useCallback()으로 함수 재생성 방지

매 렌더링마다 생성되는 함수를 캐싱하여 불필요한 자식 컴포넌트 리렌더링을 막는다.

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

 

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

대규모 애플리케이션에서 초기 로딩 시간을 단축할 수 있다.

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

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

 

가상 리스트로 대량 데이터 렌더링 최적화

대규모 목록을 효율적으로 렌더링하기 위해 뷰포트에 보이는 아이템만 로드한다.

import { FixedSizeList } from 'react-window';

function LargeList({ items }) {
  return (
    <FixedSizeList
      height={400}
      itemCount={items.length}
      itemSize={50}
      width={300}
    >
      {({ index, style }) => (
        <div style={style}>{items[index]}</div>
      )}
    </FixedSizeList>
  );
}

 

불변성 유지와 얕은 비교

객체와 배열의 불변성을 유지하여 성능을 최적화한다.

// 비효율적인 방식
const newArray = oldArray.push(newItem); // 원본 배열 변경

// 효율적인 방식
const newArray = [...oldArray, newItem]; // 새 배열 생성

 

성능 모니터링 도구

React DevTools Profiler / Chrome Performance 탭 / Lighthouse
 

주의할 점

성급한 최적화는 오히려 코드를 복잡하게 만들 수 있다는 점과 실제 성능 문제가 있을 때만 최적화를 고려한다. 항상 측정하고 분석한 후 최적화를 진행한다.
 
React 성능 최적화는 섬세한 균형이 필요하다. 과도한 최적화는 오히려 코드의 가독성과 유지보수성을 해칠 수 있으므로 신중하게 접근해야 한다.