React 애플리케이션의 성능 최적화

성능은 웹 개발의 중요한 측면이며, 특히 UI가 매우 동적인 React 애플리케이션에서는 더욱 그렇습니다. 이 블로그 게시물에서는 React 앱이 원활하게 실행되고 빠르게 로드되며 더 나은 사용자 경험을 제공할 수 있도록 최적화하는 데 도움이 되는 몇 가지 전략과 모범 사례를 공유하겠습니다.

---

1. React.memo()로 메모하기

React는 props가 변경되지 않은 경우에도 기본적으로 구성 요소를 다시 렌더링합니다. 이로 인해 불필요한 다시 렌더링이 발생하고 성능에 영향을 줄 수 있습니다. 이를 방지하기 위해 React.memo()를 사용하여 기능 구성 요소를 메모할 수 있습니다. props가 변경되지 않은 경우 구성 요소 렌더링을 건너뛰도록 React에 지시합니다.

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

2. useCallback 및 useMemo 후크를 사용하세요.

특정 종속성이 변경될 때만 다시 계산해야 하는 함수 및 계산된 값의 경우 useCallback 및 useMemo 후크가 훌륭한 도구입니다.

• useMemo는 값비싼 계산을 메모하는 데 사용됩니다

• useCallback은 콜백 기능을 메모하는 데 사용됩니다
  

const memoizedCallback = useCallback(() => {
  doSomething();
}, [dependency]);
const memoizedValue = useMemo(() => computeExpensiveValue(), [dependency]);

3. 지연 로딩 구성 요소

대규모 앱의 경우 모든 항목을 한 번에 로드하면 성능이 저하될 수 있습니다. React는 React.lazy() 및 Suspense를 사용하여 지연 로딩 구성 요소를 기본적으로 지원합니다. 이 접근 방식을 사용하면 필요할 때만 구성 요소를 로드할 수 있어 초기 로드 시간이 단축됩니다.

const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyApp() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

4. shouldComponentUpdate 및 PureComponent를 사용하여 재렌더링 최적화

클래스 기반 구성 요소에서 shouldComponentUpdate를 사용하면 구성 요소 업데이트 시기를 제어할 수 있어 불필요한 재렌더링을 방지할 수 있습니다.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Return true if the component should update
    return nextProps.someValue !== this.props.someValue;
  }
}

또는 React.PureComponent를 사용하여 props와 상태의 얕은 비교를 자동으로 수행하여 변경 사항이 없을 경우 다시 렌더링하는 것을 방지할 수 있습니다.

class MyPureComponent extends React.PureComponent {
  // This automatically prevents re-renders on shallow prop/state equality
}

5. 윈도잉/게으른 렌더링

앱이 큰 목록이나 표를 렌더링해야 하는 경우 이를 모두 한 번에 렌더링하면 성능에 영향을 줄 수 있습니다. 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>
);

6. 코드 분할

코드 분할을 사용하면 코드를 더 작은 묶음으로 나누어 요청 시 로드할 수 있습니다. 이렇게 하면 초기 로딩 시간을 획기적으로 줄일 수 있습니다. webpack과 같은 도구와 React의 동적 가져오기 지원 기능을 사용하면 코드 분할을 쉽게 구현할 수 있습니다.

import('./MyComponent').then((module) => {
  const MyComponent = module.default;
  // Do something with MyComponent
});

7. 정적 자산에는 CDN을 사용하세요.

CDN(콘텐츠 전송 네트워크)에서 이미지, 글꼴, 스타일시트와 같은 정적 자산을 제공하면 서버의 로드가 줄어들고 해당 자산을 사용자에게 전달하는 속도가 빨라집니다.

8. JSX에서 익명 함수를 피하세요

구성요소가 다시 렌더링될 때마다 익명 함수의 새 인스턴스가 생성되어 잠재적인 성능 문제가 발생합니다. 대신, JSX 외부에서 함수를 정의하거나 useCallback을 사용하여 메모하세요.

// Avoid this
<button onClick={() => handleClick()}>Click Me</button>

// Do this instead
const handleClick = useCallback(() => {
  // Handle click
}, []);
<button onClick={handleClick}>Click Me</button>

9. 과잉 데이터 가져오기 방지

불필요한 데이터를 가져오면 특히 느린 네트워크에서 앱 속도가 느려질 수 있습니다. 페이지 매김, 무한 스크롤 또는 조건부 데이터 가져오기를 사용하여 서버에서 검색되는 데이터의 양을 제한하세요.

10. 핵심 소품으로 화해 최소화

React에서 목록을 렌더링할 때 고유한 키 속성을 제공하면 React가 어떤 항목이 변경, 추가 또는 제거되었는지 식별하여 조정 작업을 최소화하고 성능을 향상시키는 데 도움이 됩니다.

{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

---

결론

React 애플리케이션의 성능을 최적화하는 것은 React가 구성 요소를 렌더링하는 방법을 이해하고 불필요한 다시 렌더링을 관리하는 것입니다. React.memo(), useCallback, useMemo, 지연 로딩, 코드 분할과 같은 도구를 활용하면 React 앱의 성능을 크게 향상시킬 수 있습니다.

모든 것을 성급하게 최적화하는 것이 목표가 아니라 앱이 점점 복잡해짐에 따라 성능에 유의하는 것이 목표라는 점을 기억하세요. React에 대한 다른 성능 최적화 팁이 있다면 댓글로 자유롭게 공유해 주세요!

저자:
Rafi Ferdos - 포트폴리오

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