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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!