React 앱을 더 빠르게 만드는 팁!

안녕하세요 여러분, 이번 블로그 게시물에서는 React 애플리케이션을 생각보다 빠르게 만들 수 있는 몇 가지 팁을 공유하겠습니다! 이러한 모범 사례를 따르면 확장성과 유지 관리성을 보장하면서 React 애플리케이션의 성능을 크게 향상시킬 수 있습니다. 엔터프라이즈 애플리케이션의 몇 가지 훌륭한 접근 방식을 바로 살펴보겠습니다.

React.memo의 놀라운 활용

React.memo을 사용하여 props가 변경되지 않은 상태에서 불필요한 재렌더링을 방지하기 위해 기능적 구성 요소를 래핑합니다.

<code class="language-javascript">import React from 'react';

const ChildComponent = React.memo(({ count }) => {
  console.log('Rendered Child');
  return <div>Count: {count}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount((p) => p + 1)}>Increment</button>
      <ChildComponent count={count} />
    </div>
  );
};</code>

적절한 상태 관리✅

상태 승격: 깊게 중첩된 구성 요소에서 중복된 상태를 피하기 위해 필요한 곳에만 상태를 배치합니다.

<code class="language-javascript">const Child = ({ onIncrement }) => (
  <button onClick={onIncrement}>Increment</button>
);

const Parent = () => {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount((p) => p + 1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <Child onIncrement={increment} />
    </div>
  );
};</code>

Suspense와 React.lazy, 코드 분할의 힘

구성요소를 동적으로 가져오고 필요할 때만 로드하여 초기 패키지 크기를 줄입니다.

<code class="language-javascript">import React, { Suspense } from 'react';
import Loader from './Loader';

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

const App = () => (
  <Suspense fallback={<Loader />}>
    <ProductsList />
  </Suspense>
);</code>

키의 중요성!

렌더링된 모든 배열 요소를 고유하게 만들어 React가 변경 사항을 인식하도록 돕습니다.

<code class="language-javascript">const ProductsList = ({ products }) => (
  <ul>
    {products.map((p) => (
      <li key={p.id}> - {p.name}</li>
    ))}
  </ul>
);</code>

가상화가 좋은 도우미입니다

대량의 데이터를 렌더링할 때는 가상화를 사용하세요.

<code class="language-javascript">import { FixedSizeList as List } from 'react-window';

const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);

const Row = ({ index, style }) => (
  <div style={style}>
    <p>{items[index]}</p>
  </div>
);

const MyList = () => (
  <List height={300} width={300} itemSize={35} itemCount={items.length}>
    {Row}
  </List>
);</code>

위 방법을 사용하면 React 앱이 매우 빨라져 눈에 띄고 더 많은 기회를 포착할 수 있습니다. 읽어주셔서 감사합니다. 이 글이 도움이 되셨다면 좋아요 부탁드려요!

위 내용은 React 앱을 더 빠르게 만드는 팁!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!