소개

React는 동적 애플리케이션을 효율적으로 구축하는 데 도움이 되는 다양한 후크를 제공합니다. 이러한 후크 중에서 useMemo 및 useCallback은 구성 요소의 성능을 향상시키는 데 필수적인 도구입니다. 둘 다 불필요한 재계산이나 함수 재생성을 방지하는 유사한 목적을 제공하지만 서로 다른 시나리오에 적합합니다.

이 글에서는 useMemo와 useCallback의 차이점, 유용한 이유, 프로젝트에서 효과적으로 사용하는 방법을 살펴보겠습니다.

1. useMemo란 무엇인가요?

useMemo 후크는 비용이 많이 드는 계산 결과를 기록하고 종속성이 변경될 때만 다시 계산하는 데 사용됩니다. 이는 불필요하게 값을 다시 계산하는 것을 방지하는 데 도움이 되며, 이는 계산 비용이 많이 드는 작업에 특히 유용합니다.

• 통사론

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

• 사용 예

import React, { useMemo } from 'react';

function Example({ items }) {
  const total = useMemo(() => {
    return items.reduce((acc, item) => acc   item.price, 0);
  }, [items]);

  return 
Total Price: {total}
;
}

여기에서 useMemo는 항목이 변경될 때만 합계를 다시 계산하므로 항목이 정적이거나 거의 업데이트되지 않는 경우 리소스를 절약합니다.

1. useCallback이 무엇인가요?

useCallback 후크는 함수를 기억하는 데 사용됩니다. useMemo와 마찬가지로 종속성이 변경될 때만 함수를 다시 계산합니다. useCallback은 모든 렌더링에서 함수가 다시 생성되는 것을 방지하는 데 특히 유용합니다. 이는 참조 동등성에 의존하는 최적화된 하위 구성 요소에 콜백을 전달할 때 성능에 도움이 될 수 있습니다.

• 통사론

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

• 사용 예

import React, { useCallback } from 'react';

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return ;
}

여기서 useCallback은 종속성이 변경되지 않는 한 handlerClick이 동일한 함수 인스턴스를 유지하도록 보장하여 ChildComponent에서 불필요한 재렌더링을 방지하는 데 도움이 됩니다.

3. useMemo와 useCallback 비교

핵심 요약

• useMemo는 계산의 결과를 캐시하려는 경우에 유용합니다.
• useCallback은 함수를 캐시하여 다시 생성하지 않으려는 경우에 유용합니다.

4. 각 후크를 언제 사용합니까?

useMemo 및 useCallback 사용 시기를 아는 것은 구성 요소의 성능 요구 사항과 메모가 눈에 띄는 차이를 가져올지 여부를 이해하는 것으로 귀결됩니다.

useMemo 사용:

• 모든 렌더링에서 다시 실행할 필요가 없는 계산 비용이 많이 드는 계산이 있는 경우.
• 파생된 데이터를 메모하면 큰 목록의 데이터를 집계하거나 수학 연산을 수행하는 등의 계산을 줄이는 데 도움이 될 수 있습니다.

useCallback 사용:

• 참조 동등성에 의존하는 하위 구성 요소에 함수를 prop으로 전달하는 경우.
• 특히 고주파수 부품에서 기능이 불필요하게 재현되는 것을 방지합니다.

5. 일반적인 실수와 모범 사례

• useMemo 또는 useCallback을 조기에 사용

이 후크를 남용하지 마십시오. 메모는 복잡성을 더하고, 필요하지 않은 경우 메모리 오버헤드를 추가하여 성능을 저하시킬 수 있습니다.

• 종속성 무시

모든 종속성을 올바르게 나열했는지 확인하세요. 종속성이 변경되었지만 배열에 포함되지 않은 경우 캐시된 결과가 오래되어 버그가 발생할 수 있습니다.

• useMemo 및 useCallback 오용

기억하세요: useMemo는 값을 캐시하고, useCallback은 함수를 캐시합니다. 잘못된 후크를 사용하면 예상치 못한 동작과 버그가 발생할 수 있습니다.

• 다시 메모하는 함정 방지

기록된 함수와 값은 종속성이 변경되는 경우에만 업데이트됩니다. 불필요한 재렌더링을 방지하려면 종속성 배열에 함수의 결과나 논리에 실제로 영향을 미치는 변수만 포함되어 있는지 확인하세요.

결론

useMemo와 useCallback은 모두 React 애플리케이션을 최적화하기 위한 강력한 도구입니다. useMemo를 사용하여 캐싱 계산하고 useCallback을 사용하여 함수를 사용하면 성능을 향상할 수 있습니다. , 특히 계산량이 많은 애플리케이션이나 자주 렌더링되는 구성 요소의 경우 더욱 그렇습니다.

이러한 후크는 도움이 되지만 현명하게 사용하는 것이 중요합니다. useMemo 및 useCallback을 전략적으로 적용하면 React 애플리케이션의 속도와 반응성을 유지할 수 있습니다.