useCallback 언제 사용해야할까?

작성배경

• 리액트 공부하는데 참고한 책에서, 모든 함수를 정의할때 useCallback으로 정의하는 것을 보고 의아했다
• 어느 경우에 useCallback을 사용하는지 궁금해졌다
• 함수를 메모제이션 하는 좋은?기능이지만 언제 어떤 경우에 사용하는지 정리가 필요했다.

useCallback

• 함수를 메모이제이션하는 역할을 한다

useCallback의 목적

• 매번 새로운 함수를 생성하는 것보다 함수의 재사용성을 높여 성능을 개선하는 데에 목적을 둔다.
• 동일한 함수를 재사용하는 것을 보장해주는 역할을 합니다.
• 동일한 함수를 재사용해야 하는 경우에만 useCallback 훅을 사용하면 됩니다.

올바른 useCallback 사용기

• 렌더링 시 자주 호출되는 함수
• 다른 컴포넌트에 props로 전달되는 함수
• 되도록 useCallback를 적게 쓰고 대신, useMemo/memo로 컴포넌트 감싸기

예시 코드

• data 배열이 변경되지 않는 한 result 변수의 값이 변경되지 않기 때문에, 불필요한 렌더링을 방지할 수 있습니다

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

interface Props {
  data: string[];
}

function MyComponent({ data }: Props) {
  const result = useMemo(() => {
    // 계산이 비용이 많이 드는 로직
    return data.filter((item) => item.includes('a'));
  }, [data]);

  return (
    <div>
      {result.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

export default memo(MyComponent);

```