반응 : useCallback 대 useMemo

둘 다 React의 최적화 후크이지만 약간 다른 목적으로 사용됩니다.

분석해 보겠습니다.

1. 목적:

• useCallback은 메모 기능을 사용하는 데 사용됩니다.
• useMemo는 값을 메모하는 데 사용됩니다.

2. 그들이 반환하는 것:

• useCallback은 메모된 콜백 함수를 반환합니다.
• useMemo는 모든 유형의 메모된 값을 반환합니다.

3. 사용 사례:

• useCallback은 일반적으로 불필요한 렌더링을 방지하기 위해 참조 동일성에 의존하는 최적화된 하위 구성 요소에 콜백을 전달할 때 사용됩니다.
• useMemo는 모든 렌더링에서 비용이 많이 드는 계산을 방지하는 데 사용됩니다.

4. 구문:

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

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

5. 성능에 미치는 영향:

• useCallback은 콜백을 prop으로 받는 하위 구성요소의 불필요한 재렌더링을 방지하는 데 도움이 됩니다.
• useMemo는 종속성이 변경되지 않은 경우 비용이 많이 드는 재계산을 방지하는 데 도움이 됩니다.

차이점을 설명하기 위해 몇 가지 예를 살펴보겠습니다.

useCallback 사용 예:

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

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Increment</button>;
});

이 예에서는 useCallback을 사용하여 handlerClick 함수를 메모합니다. 이는 ChildComponent가 React.memo에 래핑되어 있기 때문에 유용합니다. 즉, props가 변경된 경우에만 다시 렌더링된다는 의미입니다. useCallback을 사용하면 HandleClick이 렌더 간 동일한 참조를 유지하도록 보장하여(카운트가 변경되지 않는 한) ChildComponent의 불필요한 재렌더링을 방지합니다.

useMemo 사용 예:

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

const ExpensiveComponent = ({ list }) => {
  const sortedList = useMemo(() => {
    console.log('Sorting list');
    return [...list].sort((a, b) => a - b);
  }, [list]);

  return (
    <div>
      <h2>Sorted List:</h2>
      {sortedList.map(item => <div key={item}>{item}</div>)}
    </div>
  );
};

const ParentComponent = () => {
  const [list] = useState([3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]);
  const [count, setCount] = useState(0);

  return (
    <div>
      <ExpensiveComponent list={list} />
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
};

이 예에서는 정렬된 목록을 메모하기 위해 useMemo를 사용했습니다. 비용이 많이 드는 정렬 작업은 ExpensiveComponent의 모든 렌더링이 아닌 목록 소품이 변경될 때만 수행됩니다. 이는 목록과 관련되지 않은 이유로(개수가 변경되는 경우 등) ParentComponent가 다시 렌더링될 수 있고 목록을 불필요하게 다시 정렬하고 싶지 않기 때문에 여기서 특히 유용합니다.

주요 시사점:

1. 함수 참조에 의존하는 하위 구성 요소를 불필요하게 다시 렌더링하지 않으려면 useCallback을 사용하세요.
2. 값을 재계산하는 비용이 많이 드는 것을 피하려면 useMemo를 사용하세요.
3. 두 후크 모두 성능 최적화에 도움이 되지만 신중하게 사용해야 합니다. 과도하게 사용하면 상당한 성능 향상 없이 복잡성이 증가할 수 있습니다.
4. 두 후크 모두의 종속성 배열이 중요합니다. 메모된 값/함수는 종속성 중 하나가 변경되는 경우에만 업데이트됩니다.

이런 콘텐츠를 더 보려면 팔로우하세요!

위 내용은 반응 : useCallback 대 useMemo의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!