[React] 렌더링 최적화 방법

렌더링 최적화가 중요한 이유 🤔

웹 애플리케이션에서 렌더링 최적화는 사용자 경험과 성능을 크게 개선하는 중요한 작업임. 불필요한 렌더링을 줄이고, 필요한 컴포넌트만 효과적으로 업데이트하면, 초기 로딩 속도가 빨라지고 애니메이션이 부드러워지는 등 앱이 더 반응성 있게 동작함. 특히 React 같은 프레임워크에서는 효율적인 렌더링을 통해 성능을 최대화할 수 있음.

렌더링 최적화를 위한 주요 방법들 🛠️

컴포넌트 재렌더링 최소화

컴포넌트가 불필요하게 다시 렌더링되지 않도록 최적화하는 것이 중요함. 이를 위해 React.memo를 활용해 특정 조건에서만 컴포넌트가 업데이트되도록 설정할 수 있음.

import React from 'react';

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

• React.memo: 컴포넌트의 props가 변경되지 않으면 다시 렌더링되지 않게 함.
• 활용 시기: 동일한 props로 여러 번 호출되는 컴포넌트에 적합함.

useMemo와 useCallback 사용

useMemo와 useCallback 훅은 컴포넌트가 필요할 때만 계산을 수행하도록 도와주는 최적화 도구임.

• useMemo: 복잡한 계산을 메모이제이션해, 동일한 값으로 다시 계산하지 않음

import React, { useMemo } from 'react';

function ExpensiveCalculation({ value }) {
  const calculatedValue = useMemo(() => {
    return heavyCalculation(value);
  }, [value]);

  return <div>{calculatedValue}</div>;
}

• useCallback: 함수의 메모이제이션을 도와주며, 동일한 의존성을 가진 함수가 재생성되지 않도록 함.

import React, { useCallback } from 'react';

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    onClick();
  }, [onClick]);

  return <button onClick={handleClick}>Click me</button>;
}

코드 스플리팅 (Code Splitting)

코드 스플리팅을 통해 필요한 코드만 로드하여 초기 로딩 속도를 줄이고, 사용자에게 더 빠르게 응답할 수 있음. React의 React.lazy와 Suspense를 활용해 페이지별 코드 분할이 가능함.

import React, { Suspense } from 'react';

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

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

• React.lazy: 필요할 때 컴포넌트를 로드하여 초기 로딩 시간을 단축함.
• 활용 시기: 페이지별로 많은 코드가 있을 때 각 페이지에서 필요한 코드만 로드하도록 최적화할 수 있음.

이미지 최적화

이미지 파일은 웹 페이지 로딩 속도에 큰 영향을 미침. 이미지 최적화를 통해 초기 로딩 시간을 단축할 수 있음.

• 반응형 이미지 사용: 다양한 해상도에 맞게 이미지를 제공해, 필요한 크기의 이미지만 로드하도록 함.
• WebP 포맷 사용: WebP는 파일 크기를 줄이고, 압축 품질을 유지해 페이지 성능을 높임.
• 지연 로딩(Lazy Loading): loading="lazy" 속성을 사용해 사용자가 이미지를 볼 때만 로드되도록 함.

<img src="image.webp" alt="example" loading="lazy" />