[TIL]useCallback과 useMemo 차이점

🔖  useCallback

• 성능 최적화를 위해 사용되는 리액트 훅
• React 컴포넌트가 렌더링될 때마다 해당 컴포넌트 내부의 함수들도 새로 생성되는데 컴포넌트 구조가 복잡해지고 하위 컴포넌트들이 불필요하게 리렌더링될 때 성능 문제가 발생할 수 있음 특히 함수형 컴포넌트 내부에서 정의된 함수들은 렌더링마다 새로 생성되므로, 이 함수들이 자식 컴포넌트들의 props로 전달되면 자식 컴포넌트들 역시 불필요한 리렌더링이 발생할 수 있음
  
• useCallback 훅은 이러한 상황에서 함수를 메모이제이션하고 재사용할 수 있도록 해당 함수는 컴포넌트가 리렌더링될 때마다 새로 생성되지 않고 이전에 생성된 함수를 재사용하여 불필요하 리렌더링을 방지
  
• 예시

  import React, { useState, useCallback } from 'react';
  
  const ParentComponent = () => {
    const [count, setCount] = useState(0);
  
    // 이 함수는 렌더링마다 새로 생성됩니다.
    // 자식 컴포넌트에게 전달하면 자식 컴포넌트들도 불필요하게 리렌더링될 수 있습니다.
    const handleClick = () => {
      console.log('Button clicked!');
    };
  
    return (
      <div>
        <p>Count: {count}</p>
        {/* 자식 컴포넌트에게 handleClick 함수를 전달합니다 */}
        <ChildComponent onClick={handleClick} />
      </div>
    );
  }
  
  function ChildComponent({ onClick }) {
    console.log('ChildComponent rendered');
    return <button onClick={onClick}>Click me</button>;
  }
  

  위의 예제에서 handleClick 함수는 렌더마다 새로 생성되기 때문에 ChildComponent가 리렌더링될 때마다 새로운 함수가 전달되어 불필요한 리렌더링이 발생할 수 있습니다. 이 문제를 해결하기 위해 handleClick 함수를 useCallback으로 감싸면:

  const ParentComponent = () => {
    // ...
  
    // 함수를 useCallback으로 감싸서 메모이제이션합니다.
    const handleClick = useCallback(() => {
      console.log('Button clicked!');
    }, []); // 의존성 배열이 빈 배열이므로 함수는 컴포넌트 수준에서 한 번만 생성됩니다.
  
    // ...
  }
  

  이제 handleClick 함수는 컴포넌트가 리렌더링될 때마다 같은 함수를 재사용하므로 자식 컴포넌트의 불필요한 리렌더링이 방지됩니다.
  

🔖  useMemo

• 성능 최적화를 위해 사용되는 리액트 훅
• useMemo는 계산 비용이 높은 함수 호출의 결과 값을 이전에 계산된 결과 값과 비교하여 변경되지 않았다면 이전 결과 값을 사용하는 데 사용
• 객체가 매번 새로 생성되지 않고 이전에 생성된 객체가 재사용되어 최적화된 성능을 유지하기 위함

❓useCallback , useMemo 모두 성능 최적화를 위해 리액트에서 사용되는 훅? 그럼 뭐가 다르지?

• useCallback은 함수를 메모이제이션하여 자식 컴포넌트의 불필요한 리렌더링을 방지하는 데 사용
• useMemo는 계산 결과 값을 캐시하여 성능을 향상시키는 데 사용

1. useCallback:
   • useCallback은 함수를 메모이제이션하여 자식 컴포넌트에 전달할 때 불필요한 리렌더링을 방지하는 데 사용, 같은 함수가 재생성되지 않음
   • 주로 이벤트 핸들러나 자식 컴포넌트에게 전달되는 함수를 최적화할 때 사용
   • 예시

     const getDnaCardDetailData = useCallback(
         async (param: number) => {
           await dnaCardDetailStore.getDnaCardDetail(param);
           if (responseStore.responseInfo.resultCode === 'S') {
             if (dnaCardDetailStore.dnaCardDetail.ctegryList.length > 0) {
     				  console.log('실행');
             } 
         },
         [dnaCardDetailStore, dnaResultStore],
       );

2. useMemo:
   • useMemo는 계산 비용이 높은 함수의 반환 값을 메모이제이션하는 데 사용
   • 계산 비용이 높은 함수의 결과 값을 캐시하여 동일한 인풋에 대한 계산을 재실행하지 않음
   • 주로 계산 결과를 캐시하고 해당 결과를 여러 번 사용해야 할 때 사용