useMemo 후크는 React 16.8에 도입된 React Hooks API의 일부로, 비용이 많이 드는 계산 결과를 메모하여 성능을 최적화하도록 설계되었습니다. 자세한 설명은 다음과 같습니다.

useMemo란 무엇인가요?

useMemo는 메모된 값을 반환하는 후크입니다. 종속성이 변경되지 않는 한 모든 렌더링에서 다시 계산할 필요가 없도록 계산 결과를 캐시할 수 있습니다. 이는 불필요한 재렌더링을 방지하고 React 애플리케이션의 성능을 향상시키는 데 도움이 될 수 있습니다.

통사론

const memoizedValue = useMemo(() => {
  // computation or expensive calculation
  return value;
}, [dependencies]);

매개변수

1. 함수(콜백): 메모하고 싶은 값을 반환하는 함수입니다.
2. 종속성 배열: 변경 시 메모된 값이 다시 계산되도록 하는 종속성 배열입니다. 이 배열이 비어 있으면 값은 한 번만 계산됩니다(예: componentDidMount).

작동 방식

• 초기 렌더링에서 useMemo는 제공된 함수를 실행하고 그 결과를 반환하며, 이는 memoizedValue에 저장됩니다.
• 이후 렌더링에서 React는 종속성이 변경되었는지 확인합니다. 그렇지 않은 경우 캐시된 값을 다시 계산하는 대신 반환합니다.
• 종속성이 변경된 경우 React는 함수를 다시 실행하고 캐시된 값을 업데이트한 후 새 값을 반환합니다.

예

다음은 useMemo를 설명하는 간단한 예입니다.

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

const ExpensiveComponent = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Calculating factorial...');
    return n  computeFactorial(number), [number]);

  return (
    

      
Factorial of {number} is {factorial}
    
  );
};

const App = () => {
  const [num, setNum] = useState(0);

  return (
    

       setNum(num   1)}>Increase Number
      
    
  );
};

export default App;

useMemo를 사용하는 경우

• 비용이 많이 드는 계산: 성능 측면에서 비용이 많이 들고 특정 입력이 변경될 때만 다시 계산해야 하는 계산이 있는 경우 useMemo를 사용하세요.
• 불필요한 렌더링 방지: 객체나 배열을 하위 구성 요소에 소품으로 전달하는 경우 useMemo를 사용하면 렌더링할 때마다 다시 생성되지 않도록 하여 불필요한 재렌더링을 방지할 수 있습니다.

중요한 고려사항

• 성능: useMemo를 과도하게 사용하면 코드가 더 복잡해질 수 있으며 항상 성능 이점을 얻지 못할 수도 있습니다. 실제로 비용이 많이 드는 계산에 사용하는 것이 가장 좋습니다.
• 함수 재생성: 함수를 메모하는 경우 useCallback으로 래핑하지 않으면 함수 정의가 계속 재생성되므로 주의하세요.

결론

useMemo는 값을 메모하여 성능을 최적화하는 React의 강력한 도구입니다. 필요한 경우에만 비용이 많이 드는 계산을 수행하여 React 구성 요소의 효율성을 향상시키는 데 도움이 될 수 있습니다. 그러나 코드의 불필요한 복잡성을 피하기 위해 신중하게 사용해야 합니다.