useCallback

🖥️ 구현 코드

import type { DependencyList } from "react";
import { useMemo } from "./useMemo";

export function useCallback<T extends Function>(factory: T, _deps: DependencyList) {
  const callbackFunc = useMemo(() => factory, _deps);
  return callbackFunc as T;
}

📘 work-log

📍의존성이 바뀌었을 때만 "함수 인스턴스"를 새로 만들고, 의존성이 같다면 이 전에 만든 "함수 인스턴스"를 재사용

---

🤖 Gemini 설명문

useCallback은 이 프로젝트의 사용되는 훅으로, 메모이제이션된 콜백 함수를 반환합니다.
여기서 "콜백 함수"는 다른 함수의 인자로 전달되어 나중에 호출되는 함수를 의미합니다.

useCallback을 사용하는 주된 이유는

불필요한 렌더링을 방지하고 성능을 최적화

하기 위함입니다.

특징:

1. 참조 동일성 유지

일반적으로 React 컴포넌트가 렌더링될 때마다 함수는 새로 생성됩니다.
이는 해당 함수를 props로 받는 자식 컴포넌트가
불필요하게 다시 렌더링되는 원인이 될 수 있습니다 (특히 React.memo나 shouldComponentUpdate로 최적화된 자식 컴포넌트의 경우).

useCallback은 의존성 배열(deps)이 변경되지 않는 한, 이전에 생성했던 함수 인스턴스를 재사용합니다.
즉, 함수의 "참조 동일성"을 유지하여 자식 컴포넌트가 props로 받은 함수가 변경되지 않았음을 인지하게 합니다.

2. 의존성 배열

useCallback(callback, deps)의 두 번째 인자인 deps 배열은 callback 함수가 의존하는 값들의 목록입니다.

이 배열 안의 값 하나라도 변경되면 useCallback은 새로운 callback 함수 인스턴스를 생성하여 반환합니다. 만약 deps 배열이 비어있다면 ([])

callback 함수는 컴포넌트의 첫 렌더링 시에만 생성되고 이후에는 항상 동일한 함수 인스턴스를 반환합니다.