찾다

집 >웹 프론트엔드 >JS 튜토리얼 >React&#s useMemo Hook으로 성능 최적화: 값비싼 계산 메모하기

React&#s useMemo Hook으로 성능 최적화: 값비싼 계산 메모하기

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-23 00:26:10459검색

Optimizing Performance with React

React에서 메모 후크 사용

useMemo 후크는 비용이 많이 드는 계산을 메모하여 애플리케이션 성능을 최적화하는 데 도움이 되는 내장 React 후크입니다. 모든 렌더링이 아닌 종속성이 변경될 때만 특정 계산이 다시 실행되도록 보장합니다. 이는 구성요소를 다시 렌더링할 때 불필요한 값 재계산을 방지하는 데 특히 유용할 수 있습니다.

useMemo란 무엇인가요?

useMemo는 비용이 많이 드는 함수 호출의 결과를 메모하고 종속성 중 하나가 변경된 경우에만 다시 계산하는 데 사용됩니다. 이렇게 하면 렌더링할 때마다 비용이 많이 드는 재계산을 방지하여 성능을 향상할 수 있습니다.

useMemo 구문 

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);
  • expensiveFunction(param1, param2): 비용이 많이 드는 계산을 수행하는 함수
  • memoizedValue: 종속성이 변경될 때만 다시 계산되는 비싼 함수의 결과입니다.
  • [param1, param2]: 종속성 배열입니다. 메모된 값은 이러한 값 중 하나가 변경되는 경우에만 다시 계산됩니다.

메모 사용 방법

  1. 메모이제이션: useMemo 후크는 계산 결과를 저장하고 마지막 렌더링 이후 종속성이 변경되지 않은 경우 저장된 결과를 반환합니다.
  2. 재계산: 종속성이 변경되면 계산이 다시 실행되고 새 결과가 반환됩니다.

사용예메모훅

계산 속도가 느린 간단한 예를 생각해 보겠습니다.

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

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  const calculateExpensiveValue = (num) => {
    console.log('Calculating expensive value...');
    return num * 2;
  };

  // Memoizing the expensive function result
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <h2>Expensive Calculation: {memoizedValue}</h2>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

export default ExpensiveComponent;

  • 설명:

    • useMemo는calculateExpensiveValue(count)의 결과를 메모하는 데 사용됩니다.
    • calculateExpensiveValue 함수는 개수가 변경될 때만 다시 실행됩니다. 토글 상태가 변경되면 토글이 종속성 배열의 일부가 아니기 때문에 메모된 값이 다시 계산되지 않습니다.

  • 여기서 왜 useMemo를 사용하나요?

    • useMemo가 없으면 토글 상태가 변경되어 계산에 영향을 주지 않는 경우에도 모든 렌더링에서 비용이 많이 드는 함수 계산ExpensiveValue가 호출됩니다. useMemo를 사용하면 필요한 경우에만 비용이 많이 드는 계산이 수행됩니다.

useMemo를 사용해야 하는 경우

useMemo는 다음과 같은 경우에 사용해야 합니다.

  1. 비용이 많이 드는 계산: 실행 비용이 많이 드는 함수나 연산이 있고 반드시 필요한 경우가 아니면 이를 다시 계산하지 않으려는 경우(예: 대규모 배열 또는 복잡한 계산 정렬)

  2. 불필요한 재렌더링 방지: 하위 구성 요소에 전달된 값을 메모하면 하위 구성 요소가 불필요하게 다시 렌더링되는 것을 방지할 수 있습니다. 메모된 값이 변경되지 않으면 React는 하위 구성 요소 렌더링을 건너뛸 수 있습니다.

  3. 성능 최적화: 특정 논리 부분이 특정 props나 상태에만 의존하는 계산을 포함하는 경우 useMemo는 종속성이 변경될 때만 함수가 실행되도록 보장하여 성능을 최적화할 수 있습니다.

useMemo의 일반적인 사용 사례

  1. 비용이 많이 드는 계산

예를 들어 정렬이나 필터링이 필요한 항목 목록을 렌더링한다고 가정해 보겠습니다. 이 작업에는 비용이 많이 듭니다.

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);
  • 설명: 여기서는 데이터 배열이 변경될 때만 필터 작업이 실행되므로 다른 상태 값이 변경될 때 불필요한 다시 렌더링이나 계산을 방지합니다.
  1. 하위 구성요소 소품 메모하기

비용이 많이 드는 계산의 결과인 prop을 허용하는 하위 구성 요소가 있는 경우 계산을 기억하고 결과를 prop으로 전달할 수 있습니다.

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

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  const calculateExpensiveValue = (num) => {
    console.log('Calculating expensive value...');
    return num * 2;
  };

  // Memoizing the expensive function result
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <h2>Expensive Calculation: {memoizedValue}</h2>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

export default ExpensiveComponent;
  1. 불필요한 렌더링에 대한 재계산 방지

구성 요소에 상태 값이 여러 개 있지만 비용이 많이 드는 계산에 하나만 영향을 미치는 경우 관련 상태가 변경되지 않는 한 useMemo를 사용하여 해당 값을 다시 계산하지 않을 수 있습니다.

useMemo와 useCallback의 차이점

useMemo와 useCallback은 모두 메모에 사용되지만 용도는 다릅니다.

  • useMemo는 값비싼 계산이나 함수 호출의 결과를 메모하는 데 사용됩니다.
  • useCallback은 실제 함수 자체를 메모하여 렌더링할 때마다 함수가 다시 생성되는 것을 방지하는 데 사용됩니다.
후크 목적 사용예
Hook Purpose Example Usage
useMemo Memoizes the result of a function call or calculation Memoizing a computed value
useCallback Memoizes the function itself Preventing the creation of a new function on each render
메모 사용 함수 호출이나 계산 결과를 기억합니다 계산된 값 메모하기 콜백 사용 함수 자체를 메모합니다 렌더링할 때마다 새로운 기능 생성 방지

성능 고려 사항

  • useMemo 남용 방지: useMemo는 성능을 최적화할 수 있지만 React는 종속성과 메모된 값을 추적해야 하기 때문에 자체 비용이 발생합니다. 경우에 따라, 특히 간단한 계산의 경우 useMemo를 사용해도 눈에 띄는 성능 향상이 이루어지지 않을 수 있습니다.
  • 벤치마킹: useMemo를 사용하기 전후에 구성 요소를 벤치마킹하여 특정 사례에서 실제로 성능이 향상되는지 확인하는 것이 중요합니다.

정렬을 이용한 메모 사용예

다음은 useMemo를 사용하여 정렬된 목록을 메모하는 예입니다.

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);
  • 설명:
    • 이 예에서는 sortedItems가 useMemo를 사용하여 메모됩니다. 정렬 작업은 항목 배열이나 sortOrder 상태가 변경될 때만 다시 계산됩니다.
    • useMemo가 없으면 항목이나 sortOrder가 변경되지 않은 경우에도 렌더링할 때마다 정렬이 발생합니다.

사용요약메모훅

  • useMemo는 비용이 많이 드는 계산을 메모하고 종속성이 변경될 때만 다시 계산하는 데 사용됩니다.
  • 불필요한 재계산을 방지하여 성능을 크게 향상시킬 수 있습니다.
  • useMemo는 비용이 많이 들고 필요한 경우에만 다시 계산해야 하는 계산이나 계산에 사용해야 합니다.

결론

useMemo 후크는 React 애플리케이션의 성능을 최적화하는 데 필수적인 도구입니다. 이는 비용이 많이 드는 계산이 필요한 경우에만 수행되도록 보장하여 구성 요소를 더욱 효율적으로 만듭니다. 하지만 과도하게 사용하면 불필요한 복잡성과 잠재적인 성능 저하가 발생할 수 있으므로 신중하게 사용해야 합니다.

위 내용은 React&#s useMemo Hook으로 성능 최적화: 값비싼 계산 메모하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Array if count for while Filter using function this Other
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：innerHTML을 통해 추가된 스크립트가 항상 실행되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?다음 기사：innerHTML을 통해 추가된 스크립트가 항상 실행되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

관련 기사

더보기