React&#s useMemo 이해: 기능, 사용 시기 및 모범 사례

React는 사용자 인터페이스 구축을 위한 강력한 라이브러리이지만 애플리케이션이 성장함에 따라 때로는 성능이 문제가 될 수 있다는 것을 알 수 있습니다. 여기가 useMemo와 같은 React 후크가 작동하는 곳입니다. 이 기사에서는 useMemo가 무엇을 하는지, 언제 유용하고 사용에 대한 모범 사례를 살펴보겠습니다. 또한 피해야 할 몇 가지 일반적인 함정에 대해서도 다루겠습니다.

useMemo란 무엇인가요?

useMemo는 계산 결과를 메모할 수 있는 React Hook입니다. 간단히 말해서 함수의 결과를 기억하고 종속성이 변경될 때만 다시 계산합니다. 이를 통해 불필요한 계산을 방지하고 성능을 향상시킬 수 있습니다.

기본적인 예는 다음과 같습니다.

import React, { useMemo } from 'react';

function ExpensiveCalculation({ num }) {
  const result = useMemo(() => {
    console.log('Calculating...');
    return num * 2;
  }, [num]);

  return <div>The result is {result}</div>;
}

이 예에서 useMemo 내부 함수는 num이 변경될 때만 실행됩니다. num이 동일하게 유지되면 React는 계산을 건너뛰고 이전에 메모한 결과를 사용합니다.

왜 useMemo를 사용하나요?

useMemo를 사용하는 주된 이유는 성능을 최적화하는 것입니다. React에서는 상태나 소품이 변경될 때마다 구성 요소가 다시 렌더링됩니다. 이로 인해 특히 계산이 복잡하거나 구성 요소 트리가 큰 경우 비용이 많이 드는 계산이 필요 이상으로 자주 실행될 수 있습니다.

useMemo가 특히 유용한 몇 가지 시나리오는 다음과 같습니다.

1. 비용이 많이 드는 계산:

대규모 데이터세트 필터링과 같은 무거운 계산을 수행하는 구성요소가 있다고 가정해 보세요. useMemo가 없으면 이 계산이 렌더링할 때마다 실행되어 애플리케이션 속도가 느려질 수 있습니다.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ numbers }) {
  // Expensive calculation: filtering even numbers
  const evenNumbers = useMemo(() => {
    console.log('Filtering even numbers...');
    return numbers.filter(num => num % 2 === 0);
  }, [numbers]);

  return (
    <div>
      <h2>Even Numbers</h2>
      <ul>
        {evenNumbers.map((num) => (
          <li key={num}>{num}</li>
        ))}
      </ul>
    </div>
  );
}

// Usage
const numbersArray = Array.from({ length: 100000 }, (_, i) => i + 1);
export default function App() {
  return <ExpensiveCalculationComponent numbers={numbersArray} />;
}

이 예에서 필터링 작업은 계산 비용이 많이 듭니다. useMemo에 래핑하면 모든 렌더링이 아닌 숫자 배열이 변경될 때만 실행됩니다.

2. 객체나 배열 재생성 방지

렌더링할 때마다 새 배열이나 객체를 하위 구성 요소에 prop으로 전달하면 내용이 변경되지 않았더라도 불필요한 다시 렌더링이 발생할 수 있습니다. useMemo를 사용하여 배열이나 개체를 메모할 수 있습니다.

import React, { useMemo } from 'react';

function ChildComponent({ items }) {
  console.log('Child component re-rendered');
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default function ParentComponent() {
  const items = useMemo(() => ['apple', 'banana', 'cherry'], []);

  return (
    <div>
      <h2>Fruit List</h2>
      <ChildComponent items={items} />
    </div>
  );
}

여기서 항목 배열은 useMemo를 사용하여 메모되므로 필요한 경우에만 ChildComponent가 다시 렌더링됩니다. useMemo가 없으면 렌더링할 때마다 새 배열이 생성되어 하위 구성 요소가 불필요하게 다시 렌더링됩니다.

3. 대규모 구성 요소 트리 최적화

대형 구성 요소 트리로 작업할 때 useMemo를 사용하면 특히 깊게 중첩된 구성 요소 내에서 비용이 많이 드는 작업의 경우 불필요한 다시 렌더링을 줄이는 데 도움이 될 수 있습니다.

import React, { useMemo } from 'react';

function LargeComponentTree({ data }) {
  const processedData = useMemo(() => {
    console.log('Processing data for large component tree...');
    return data.map(item => ({ ...item, processed: true }));
  }, [data]);

  return (
    <div>
      <h2>Processed Data</h2>
      {processedData.map((item, index) => (
        <div key={index}>{item.name}</div>
      ))}
    </div>
  );
}

// Usage
const largeDataSet = Array.from({ length: 1000 }, (_, i) => ({ name: `Item ${i + 1}` }));
export default function App() {
  return <LargeComponentTree data={largeDataSet} />;
}

이 예에서 useMemo는 구성 요소에서 렌더링하기 전에 대규모 데이터 세트를 처리하는 데 사용됩니다. 처리된 데이터를 기억함으로써 구성 요소는 원본 데이터 속성이 변경될 때만 데이터를 다시 계산하므로 불필요한 재처리가 방지되고 성능이 향상됩니다.

사용 모범 사례Memo

useMemo는 강력한 도구이지만 올바르게 사용하는 것이 중요합니다. 다음은 몇 가지 모범 사례입니다.

1. 성능 최적화를 위해 사용: 비싼Calculation은 언제 useMemo를 사용해야 하는지 보여주는 좋은 예입니다. 숫자와 승수 상태 변수에 따라 잠재적으로 비용이 많이 드는 작업(배열을 합산하고 결과를 곱함)을 수행합니다.

const expensiveCalculation = useMemo(() => {
  console.log('Calculating sum...');
  return numbers.reduce((acc, num) => acc + num, 0) * multiplier;
}, [numbers, multiplier]);

이 계산은 숫자나 배수가 변경될 때만 다시 실행되므로 다른 재렌더링 시 불필요한 재계산을 피할 수 있습니다.

1. 종속성을 정확하게 유지: 비싼Calculation에 대한 useMemo 후크가 종속성 배열에 숫자와 승수를 모두 포함하는 방법에 주목하세요. 이렇게 하면 이러한 값 중 하나가 변경될 때마다 계산이 다시 실행됩니다.

}, [numbers, multiplier]);  // Correct dependencies

종속성에서 승수를 생략한 경우 승수 ​​변경 시 계산이 업데이트되지 않아 잘못된 결과가 발생합니다.

1. useMemo를 남용하지 마세요: simpleValue 예제는 useMemo의 불필요한 사용을 보여줍니다.

const simpleValue = useMemo(() => {
  return 42;  // This is not a complex calculation
}, []);  // Empty dependencies array

값이 일정하고 계산이 간단하기 때문에 이런 메모는 불필요합니다. 성능상의 이점 없이 복잡성만 추가합니다.

1. 사용하지 말아야 할 경우 이해하기: HandleClick 함수는 useMemo를 사용하지 말아야 할 경우의 좋은 예입니다.

const handleClick = () => {
  console.log('Button clicked');
};

이 함수는 간단하며 많은 계산이 필요하지 않습니다. 메모하면 성능이 크게 향상되지 않으면서 코드가 불필요하게 복잡해집니다.

이러한 모범 사례를 따르면 코드를 지나치게 복잡하게 하거나 잘못된 종속성 관리로 인한 잠재적인 버그를 유발하지 않고 useMemo를 효과적으로 사용하여 React 구성 요소를 최적화할 수 있습니다.

피해야 할 일반적인 함정

useMemo는 훌륭한 도구일 수 있지만 주의해야 할 몇 가지 일반적인 실수가 있습니다.

1. 종속성 무시: 배열에 종속성을 포함하는 것을 잊어버리면 메모된 값이 오래되어 버그가 발생할 수 있습니다. 메모된 함수 내에서 사용된 모든 변수가 종속성 배열에 포함되어 있는지 항상 다시 확인하세요.

2. useMemo Everywhere 사용: 모든 기능이나 값을 메모할 필요는 없습니다. 코드에 성능 문제가 없다면 useMemo를 추가해도 성능이 향상되지 않습니다. 실제로 메모에 대한 오버헤드로 인해 작업 속도가 약간 느려질 수 있습니다.

3. 재 렌더링에 대한 오해: useMemo는 구성 요소의 전체 렌더링 프로세스가 아닌 메모된 계산만 최적화합니다. 구성 요소가 여전히 새 prop이나 상태를 수신하면 메모된 값이 변경되지 않더라도 다시 렌더링됩니다.

결론

useMemo는 React 애플리케이션의 성능을 최적화하기 위한 강력한 후크이지만 현명하게 사용해야 합니다. 실제 성능 병목 현상이 있는 곳에서 사용하는 데 집중하고 항상 종속성이 올바른지 확인하세요. 이러한 모범 사례를 따르면 일반적인 함정을 피하고 프로젝트에서 useMemo를 최대한 활용할 수 있습니다.

위 내용은 React&#s useMemo 이해: 기능, 사용 시기 및 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!