`useCallback` 대 `useMemo` 후크

React 성능 향상: useCallback과 useMemo 후크 비교

React의 useCallback 및 useMemo 후크는 애플리케이션 성능을 최적화하는 데 중요합니다. 언제, 어떻게 사용하는지 이해하면 불필요한 재렌더링을 방지하고 앱이 원활하게 실행되도록 할 수 있습니다. 이 기사에서는 useCallback 및 useMemo를 효과적으로 사용하는 실제 사례를 살펴보겠습니다.

useCallback을 사용하는 경우

useCallback 후크는 콜백 함수의 메모화된 버전을 반환합니다. 즉, 종속성 중 하나가 변경되는 경우에만 함수를 다시 생성합니다. 이는 불필요하게 다시 렌더링되는 것을 방지하기 위해 함수를 하위 구성 요소에 소품으로 전달할 때 특히 유용합니다.

실시간 예시: 불필요한 재렌더링 방지

하위 구성 요소에 함수를 전달하는 상위 구성 요소가 있다고 가정해 보겠습니다. useCallback이 없으면 함수 논리가 변경되지 않은 경우에도 상위 구성 요소가 렌더링될 때마다 하위 구성 요소가 다시 렌더링됩니다.

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

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

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  );
};

export default ParentComponent;

위의 예에서는 useCallback을 사용하여 handlerIncrement를 메모합니다. ChildComponent는 개수가 변경될 때만 다시 렌더링되므로 불필요한 다시 렌더링을 방지하고 성능이 향상됩니다.

useMemo를 사용하는 경우

useMemo 후크는 함수의 결과를 기억하고 종속성 중 하나가 변경될 때만 캐시된 결과를 다시 계산하는 데 사용됩니다. 함수가 비용이 많이 드는 계산을 수행하는 상황에서 성능을 최적화하는 데 유용합니다.

실시간 예: 비용이 많이 드는 계산 최적화

큰 목록 필터링과 같이 계산 비용이 많이 드는 작업을 수행하는 구성 요소가 있다고 가정해 보겠습니다.

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

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="Filter items"
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ExpensiveComponent;

이 예에서는 useMemo를 사용하여 항목 배열 필터링 결과를 캐시합니다. 이렇게 하면 값비싼 필터링 작업이 항목이나 필터가 변경될 때만 다시 계산되므로 불필요한 계산이 방지됩니다.

useCallback 및 useMemo 사용 지침

• 불필요한 재렌더링을 피하기 위해 하위 구성요소에 함수를 전달할 때 useCallback을 사용하세요.
• useMemo를 사용하여 렌더링할 때마다 다시 계산할 필요가 없는 값비싼 계산을 수행하세요.
• 과도하게 사용하지 마세요. 메모하면 복잡성이 더해지고 때로는 코드를 읽기가 더 어려워질 수 있습니다. 성능 문제를 식별한 경우에만 사용하세요.
• 종속성 배열을 기억하세요. 항상 종속성을 정확하게 지정하세요. 그렇지 않으면 버그나 예상치 못한 동작이 발생할 수 있습니다.

결론

React의 useCallback 및 useMemo 후크는 불필요한 재렌더링과 비용이 많이 드는 계산을 방지하여 구성 요소 성능을 최적화하는 강력한 도구입니다. 이러한 후크를 주의 깊게 적용하면 React 애플리케이션이 효율적으로 실행되도록 할 수 있습니다.

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