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 (
    

      
Count: {count}
      
  );
};

export default ParentComponent;

위의 예에서 handlerIncrement는 useCallback을 사용하여 메모됩니다. 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 (
    

       setFilter(e.target.value)}
        placeholder="Filter items"
      />
      

        {filteredItems.map((item, index) => (
          
{item}
        ))}
      
  );
};

export default ExpensiveComponent;

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

useCallback 및 useMemo 사용 지침

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

결론

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