최신 웹 애플리케이션을 구축할 때는 성능이 핵심입니다. 사용자는 빠르고 반응이 빠른 앱을 기대하며 약간의 지연이라도 불만을 불러일으킬 수 있습니다. React는 강력하기는 하지만 때때로 성능 병목 현상을 겪을 수 있습니다. 특히 애플리케이션의 크기와 복잡성이 증가함에 따라 더욱 그렇습니다. 다행히 메모화, 지연 로딩 등을 포함하여 성능을 최적화할 수 있는 여러 가지 기술이 있습니다.

이 가이드에서는 React 애플리케이션의 성능을 최적화하는 가장 효과적인 방법 중 일부를 분석하겠습니다. 병목 현상을 식별하고 해결하는 데 도움이 되는 메모 작성, 지연 로딩 및 React Profiler와 같은 도구의 기본 사항을 다룰 것입니다. 시작해 보세요!

소개: 최신 React 앱에서 성능이 중요한 이유

웹 앱을 자동차로 생각해 보세요. 겉모습이 아무리 멋져 보여도 성능이 좋지 않으면 사용자 경험이 저하됩니다. React 앱에서 이 "성능"은 구성 요소가 얼마나 빨리 렌더링되고 데이터나 상태가 변경될 때 얼마나 효율적으로 업데이트되는지를 나타냅니다.

React 앱이 확장됨에 따라 구성 요소를 불필요하게 다시 렌더링하거나 무거운 번들을 한꺼번에 로드하면 성능이 저하될 수 있습니다. 그렇기 때문에 원활하고 성능이 뛰어난 애플리케이션을 구축하려면 React 성능 최적화 기술을 배우는 것이 중요합니다.

React의 메모화

React.memo와 useMemo를 효과적으로 사용하는 방법

메모이제이션은 단순히 함수 호출의 결과를 캐싱하여 매번 다시 계산할 필요가 없다는 것을 의미하는 멋진 단어입니다. React에서 메모이제이션은 이전 렌더링 결과를 기억하고 변경된 사항이 없으면 캐시된 결과를 사용하여 불필요한 재렌더링을 방지하는 데 도움이 됩니다.

리액트.메모

React.memo부터 시작해 보겠습니다. 이 고차 컴포넌트는 props가 변경되지 않은 경우 컴포넌트가 다시 렌더링되는 것을 방지합니다.

예:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return 
Hello, {name}
;
});

이 예에서 MyComponent는 name prop이 변경된 경우에만 다시 렌더링됩니다. 동일한 이름 값을 전달하면 React는 렌더링을 건너뛰어 성능이 향상됩니다.

사용메모

다음으로는 useMemo 입니다. 이 후크는 기능적 구성 요소 내부의 값비싼 계산이나 값을 메모하는 데 사용됩니다.

예:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total   item.value, 0);
  }, [items]);

  return 
Total Value: {expensiveCalculation}
;
}

여기에서는 항목 배열이 변경될 때만 계산이 다시 실행되므로 렌더링할 때마다 동일한 결과를 다시 계산하지 않아도 되므로 시간이 절약됩니다.

지연 로딩 구성 요소

React.lazy로 로드 시간 개선

지연 로딩은 모든 것을 미리 로드하는 대신 구성요소가 필요할 때만로드되는 기술입니다. 이렇게 하면 애플리케이션의 초기 로드 시간이 줄어들고 속도가 빨라지는 느낌을 받을 수 있습니다.

React는 요청 시 구성 요소를 로드할 수 있는 React.lazy()라는 내장 함수를 제공합니다.

예:

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...}>
      
    
  );
}

이 예에서 MyComponent는 실제로 필요할 때만 로드됩니다. Suspense 구성요소는 구성요소를 가져오는 동안 대체 UI(예: 로딩 스피너)를 제공하여 사용자 환경을 더욱 원활하게 만듭니다.

성능 모니터링을 위한 React Profiler

병목 현상을 식별하는 방법

측정할 수 없는 것을 최적화하는 것은 어렵습니다. 이것이 React Profiler가 필요한 곳입니다. React Profiler를 사용하면 구성 요소의 성능을 추적하고, 느린 렌더링을 식별하고, 재렌더링의 '비용'을 측정할 수 있습니다.

React Profiler를 사용하려면 로 구성 요소 트리를 래핑하고 성능 데이터를 수집하는 콜백 함수를 제공하기만 하면 됩니다.

예:

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    
      
    
  );
}

프로파일러를 사용하면 각 구성 요소를 렌더링하는 데 걸리는 시간을 추적하고 불필요한 재렌더링과 같이 성능을 향상할 수 있는 영역을 찾을 수 있습니다.

기타 최적화 전략

코드 분할, 이벤트 처리 최적화 등

메모와 지연 로딩 외에도 React 앱의 성능을 향상시킬 수 있는 몇 가지 다른 기술이 있습니다:

1. 코드 분할: Webpack의 코드 분할 기능을 사용하여 요청 시 로드할 수 있도록 앱을 더 작은 덩어리로 나눕니다. 이렇게 하면 초기 번들 크기가 줄어듭니다.

   const OtherComponent = lazy(() => import('./OtherComponent'));

1. 이벤트 처리 최적화: useCallback 후크를 사용하여 이벤트 핸들러를 메모하여 렌더링할 때마다 다시 생성되는 것을 방지합니다.

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

1. 디바운싱 및 제한: 업데이트 빈도를 제한하기 위해 이벤트 리스너를 디바운싱하거나 제한하여 스크롤이나 크기 조정과 같은 이벤트 리스너를 최적화합니다.

   const handleScroll = debounce(() => {
     console.log('Scroll event');
   }, 300);

결론: 이러한 기술을 사용하여 고성능 React 애플리케이션 구축

빠르고 효율적인 React 애플리케이션을 구축하려면 여러 기술의 조합이 필요합니다. React.memo 및 useMemo와 함께 memoization을 사용하면 불필요한 재렌더링을 방지할 수 있습니다. 지연 로딩 React.lazy를 사용한 구성 요소를 사용하면 필요할 때만 구성 요소를 가져와서 로드 시간을 개선할 수 있습니다. React Profiler는 성능 병목 현상을 식별하고 최적화하는 데 도움이 됩니다.

코드 분할 및 이벤트 최적화와 같은 전략을 결합하면 React 앱의 크기와 복잡성이 증가하더라도 원활하고 반응이 빠른 사용자 경험을 제공할 수 있습니다.

React 앱의 성능을 다음 단계로 끌어올릴 준비가 되셨나요? 프로젝트에서 이러한 최적화 기술을 시도하고 앱 속도가 향상되는 것을 지켜보세요!

이 기사가 마음에 드셨다면 제 작업을 후원해 보세요.

• 커피 사주세요
• 멘토십이나 진로 조언을 위한 전화 예약
• 트위터에서 나를 팔로우하세요
• LinkedIn에 연결