최대 성능을 위해 React 애플리케이션 최적화

소개

저는 3년 넘게 React 코드를 작성해 왔습니다. 하지만 처음에 제가 집중하지 않았던 것 중 하나는 React 성능을 최적화하는 것이었습니다. 대부분의 경우 기술적 부채가 누적되어 성능 최적화가 어려워집니다.

처음부터 최적화에 집중하는 것은 꽤 어렵지만, 막대한 기술적 부채를 피하기 위해 수시로 최적화 일정을 잡을 수 있습니다.

React의 최적화 기술 중 일부를 살펴보겠습니다. 이는 코드를 작성하는 동안 구현할 수 있습니다. 다른 방법이 아닌 이 방법을 선택하느냐의 문제입니다.

자, 시작해 보겠습니다.

1. 대용량 목록 최적화

React에는 컴포넌트가 있기 때문에 렌더링 목록이 매우 일반적입니다. 큰 목록을 렌더링하면 렌더링 속도가 느려지고 메모리 사용량이 늘어날 수 있으므로 어렵습니다. 가상화는 이러한 문제를 해결하는 가장 좋은 방법입니다. 단순히 보이는 목록만 렌더링하고 필요할 때 다른 항목도 렌더링합니다.

React Window 및 React Virtualized는 가상화 목록으로 널리 사용되는 라이브러리입니다. 뷰포트에 보이는 항목만 렌더링하므로 주어진 시간에 렌더링되는 DOM 노드의 수가 크게 줄어듭니다.

다음은 React Window의 예입니다.

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

    const MyList = ({ items }) => (
      <List
        height={500} // Height of the container
        itemCount={items.length} // Total number of items
        itemSize={35} // Height of each item
        width={300} // Width of the container
      >
        {({ index, style }) => (
          <div style={style}>
            {items[index]}
          </div>
        )}
      </List>
    );

---

2. 메모 사용

useMemo는 계산 결과를 기억하는 React Hook입니다. 따라서 종속성이 변경되지 않는 한 계산의 다중 처리가 허용되지 않습니다. 이는 함수나 계산이 비용이 많이 들고 모든 렌더링에서 다시 실행되어서는 안 되는 시나리오에서 성능을 최적화하는 데 유용할 수 있습니다.

useMemo 구문은 다음과 같습니다.

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

보시다시피 useMemo는 두 가지 인수를 사용합니다.

• 기억할 수 있도록 값을 반환하는 함수
• 기억된 값을 다시 컴퓨터해야 하는 시기를 결정하는 종속성 배열입니다.

다음은 useMemo의 예입니다.

    import React, { useState, useMemo } from 'react';

    const ExpensiveComponent = ({ a, b }) => {
      const computeExpensiveValue = (a, b) => {
        console.log('Computing expensive value...');
        return a + b;
      };

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

      return (
        

          
Computed Value: {memoizedValue}
        
      );
    };

    const ParentComponent = () => {
      const [a, setA] = useState(1);
      const [b, setB] = useState(2);
      const [count, setCount] = useState(0);

      return (
        

          
           setCount(count + 1)}>Increment Count
        
      );
    };

---

3. 코드 분할

기존 설정에서는 애플리케이션의 모든 구성 요소가 단일 파일로 묶였습니다. 코드 분할은 애플리케이션을 더 작은 덩어리로 나누는 최적화 기술입니다. 더 작은 구성 요소를 로드하고 필요하지 않은 다른 구성 요소를 방지하므로 애플리케이션의 로딩 시간이 줄어듭니다.

다음은 코드 분할의 예입니다.

    import React, { useState } from 'react';

    function App() {
      const [component, setComponent] = useState(null);

      const loadComponent = async () => {
        const { default: LoadedComponent } = await import('./MyComponent');
        setComponent(<LoadedComponent />);
      };

      return (
        <div>
          <h1>Code Splitting Example</h1>
          <button onClick={loadComponent}>Load Component</button>
          {component}
        </div>
      );
    }

    export default App;

---

4. 지연 로드에 반응

React.Lazy는 구성 요소 로딩을 최적화하는 중요한 방법입니다. 이를 통해 구성 요소를 지연 로드할 수 있습니다. 즉, 해당 구성 요소는 필요한 경우에만 로드됩니다. 이를 사용하면 애플리케이션을 더 작은 구성 요소로 분할하고 요청 시 로드할 수 있습니다.

React.lazy()는 구성 요소를 동적으로 가져오는 데 사용됩니다. 구성요소가 필요할 때 비동기식으로 로드되며 그때까지는 로딩 스피너와 같은 폴백 UI가 표시될 수 있습니다.

다음은 지연 로드의 예입니다.

    import React, { Suspense } from 'react';

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

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

    export default App;

---

제한 및 디바운싱

함수를 호출할 때 React에만 국한된 것이 아니라 일반적인 프로그래밍에도 적용됩니다. 조절은 기능이 실행되는 빈도를 정의하는 기술입니다. 기능이 조절되면 이벤트가 트리거된 횟수에 관계없이 지정된 시간 간격 내에 한 번만 실행될 수 있습니다. 예를 들어, 버튼이 너무 자주 호출되지 않도록 버튼 클릭에 제한을 추가합니다.

조절의 예:

    import React, { useState } from 'react';

    function ThrottledButton() {
      const [count, setCount] = useState(0);

      const throttle = (func, delay) => {
        let lastCall = 0;
        return () => {
          const now = new Date().getTime();
          if (now - lastCall >= delay) {
            lastCall = now;
            func();
          }
        };
      };

      const incrementCount = () => {
        setCount((prevCount) => prevCount + 1);
      };

      const throttledIncrement = throttle(incrementCount, 2000);

      return (
        <div>
          <h1>Count: {count}</h1>
          <button onClick={throttledIncrement}>Click Me</button>
        </div>
      );
    }

    export default ThrottledButton;

디바운싱은 함수 호출 후 일정 시간이 지난 후 해당 함수가 실행되도록 하는 데 사용됩니다. 이벤트가 반복적으로 발생하면 지정된 지연 기간 동안 이벤트 발생이 중지된 후에만 디바운싱된 함수가 실행됩니다. 예를 들어, 사용자가 검색 입력을 입력하고 제안을 제공할 때 사용자가 입력을 완료할 수 있도록 함수를 호출하기 전에 몇 밀리초 정도 기다립니다.

디바운싱의 예:

    import React, { useState } from 'react';

    function debounce(func, delay) {
      let timeoutId;
      return function (...args) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
          func(...args);
        }, delay);
      };
    }

    const DebouncedSearch = () => {
      const [query, setQuery] = useState('');

      const handleSearch = (event) => {
        setQuery(event.target.value);
        console.log('Searching for:', event.target.value);
        // Here you would typically trigger an API call or filter a list based on the query
      };

      const debouncedSearch = debounce(handleSearch, 500);

      return (
        <div>
          <h1>Search</h1>
          <input
            type="text"
            placeholder="Type to search..."
            onChange={debouncedSearch}
          />
          <p>Search Query: {query}</p>
        </div>
      );
    };

    export default DebouncedSearch;

나와 연결하세요

기술, 혁신 및 그 이상에 관한 모든 것을 연결하고 최신 정보를 받아보세요! ?

• 트위터
• 링크드인

결론

React 애플리케이션을 최적화하는 것은 특히 복잡성과 규모가 커짐에 따라 원활하고 효율적으로 실행되도록 하는 데 매우 중요합니다. 목록 가상화, useMemo를 통한 메모, 코드 분할, 지연 로딩, 제한, 디바운싱과 같은 기술을 통합하면 React 애플리케이션의 성능을 크게 향상시킬 수 있습니다.

이 방법이 React 애플리케이션의 성능을 최적화하는 데 도움이 되기를 바랍니다. 기사를 읽어주셔서 감사합니다.

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