React 애플리케이션 최적화: 더 나은 성능을 위한 간단한 기술

React는 사용자 인터페이스 구축에 널리 사용되는 도구이지만 앱이 커지면 속도가 느려질 수 있습니다. 이 글에서는 React 앱을 최적화하는 데 사용할 수 있는 다양한 기술을 살펴보겠습니다.

1. React.memo로 불필요한 재렌더링 방지

항상 업데이트할 필요가 없는 컴포넌트가 있다면 React.memo로 래핑하세요. 이는 React가 마지막 출력을 기억하고 변경된 사항이 없으면 다시 렌더링을 건너뛰는 데 도움이 됩니다.

import React from 'react';

const MyComponent = React.memo((props) => {
  // Your component logic
});

2. PureComponent로 추가 작업 방지

클래스 컴포넌트를 사용하는 경우 React.Component 대신 React.PureComponent를 확장하세요. 이는 props나 상태가 실제로 변경된 경우에만 React에게 다시 렌더링하도록 지시합니다.

import React from 'react';

class MyComponent extends React.PureComponent {
  // Your component logic
}

3. useCallback과 useMemo를 사용하여 작업 내용 저장

React 후크 useCallback 및 useMemo는 함수와 값을 기억하여 작업을 절약하는 데 도움이 됩니다. 이렇게 하면 구성 요소가 렌더링될 때마다 새 구성 요소가 생성되는 것을 방지할 수 있습니다.

• useCallback: 함수를 기억합니다.

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

• useMemo: 값을 기억합니다.

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

4. React.lazy 및 Suspense를 사용하여 주문형 코드 로드

React.lazy 및 Suspense를 사용하여 필요한 경우에만 코드 일부를 로드하세요. 이렇게 하면 초기 로드가 더 빨라집니다.

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

5. 경로별 코드 분할

코드를 경로별로 분할하여 각 페이지에 필요한 코드만 로드하세요. 이렇게 하면 초기 로드 시간이 단축됩니다.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { lazy, Suspense } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <router>
      <suspense fallback="{<div">Loading...}>
        <switch>
          <route path="/" exact component="{Home}"></route>
          <route path="/about" component="{About}"></route>
        </switch>
      </suspense>
    </router>
  );
}

6. 지연 로드 이미지 및 구성 요소

필요할 때까지 이미지와 구성요소 로드를 지연하세요. 이를 통해 초기 로드 시간과 성능이 향상됩니다.

• 지연 로드 이미지: 오프스크린 이미지를 연기하려면 img 태그의 loading 속성을 사용하세요.

<img src="image.jpg" alt="React 애플리케이션 최적화: 더 나은 성능을 위한 간단한 기술" loading="lazy">

• 지연 로드 구성 요소: 구성 요소에는 React.lazy 및 Suspense를 사용하십시오.

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

7. JSX에서 인라인 함수 피하기

JSX의 인라인 기능은 매번 새로운 인스턴스를 생성하기 때문에 속도가 느려질 수 있습니다. render 메서드 외부에서 정의하거나 useCallback을 사용하세요.

// Instead of this
<button onclick="{()"> doSomething()}>Click me</button>

// Do this
const handleClick = useCallback(() => {
  doSomething();
}, []);
<button onclick="{handleClick}">Click me</button>

8. React Virtualization으로 대규모 목록 최적화

대규모 목록을 처리할 때는 React-Window 또는 React-Virtualized와 같은 라이브러리를 사용하여 화면에 보이는 것만 렌더링하여 부하를 줄입니다.

import { FixedSizeList as List } from 'react-window';

const MyList = ({ items }) => (
  <list height="{500}" itemcount="{items.length}" itemsize="{35}" width="{300}">
    {({ index, style }) => (
      <div style="{style}">
        {items[index]}
      </div>
    )}
  </list>
);

9. 스로틀 및 디바운스 이벤트

빈번한 기능을 제한하거나 디바운싱하여 실행 빈도를 제어합니다. 이는 스크롤이나 입력과 같은 이벤트에 특히 유용합니다.

import { useCallback } from 'react';
import { debounce } from 'lodash';

const handleInputChange = useCallback(
  debounce((value) => {
    // Handle the change
  }, 300),
  []
);

10. 목록에 고유 키 사용

각 목록 항목에 고유한 키 소품이 있는지 확인하세요. 이는 React가 항목을 추적하고 효율적으로 업데이트하는 데 도움이 됩니다.

const items = list.map((item) => (
  <listitem key="{item.id}"></listitem>
));

11. 프로덕션 빌드 배포

최소화 및 데드 코드 제거와 같은 최적화의 이점을 누리려면 항상 React 앱용 프로덕션 빌드를 사용하세요.

# Create a production build
npm run build

이러한 기술을 사용하면 React 애플리케이션을 더 빠르고 효율적으로 만들어 사용자에게 더 나은 경험을 제공할 수 있습니다. 최적화는 지속적인 프로세스이므로 정기적으로 앱을 프로파일링하고 개선하세요.

즐거운 코딩하세요.

위 내용은 React 애플리케이션 최적화: 더 나은 성능을 위한 간단한 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!