반응 : useCallback 대 useMemo-JS 튜토리얼-php.cn

React : useCallback vs 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 (   Count: {count}
 
 ); }; const ChildComponent = React.memo(({ onClick }) => { console.log('ChildComponent rendered'); return ; });

로그인 후 복사

이 예에서는 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 (  Sorted List:
 {sortedList.map(item => {item}
)} 
 ); }; const ParentComponent = () => { const [list] = useState([3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]); const [count, setCount] = useState(0); return (    
 ); };

로그인 후 복사

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

주요 시사점: