1. useCallback이란?

useCallback은 React에서 제공하는 Hook으로, 함수를 메모이제이션(memoization)하기 위해 사용된다. 메모이제이션이란 이전에 계산한 값을 메모리에 저장해두었다가 같은 입력이 들어오면 다시 계산하지 않고 저장된 값을 반환하는 최적화 기법이다.

쉽게 비유하자면, 자주 가는 카페에서 "아메리카노 한 잔"을 주문할 때마다 전체 메뉴판을 처음부터 다시 읽는 것이 아니라, 이미 알고 있는 메뉴 번호를 기억해두고 바로 주문하는 것과 같다. useCallback은 함수를 이런 식으로 "기억"해두었다가 필요할 때 재사용하게 해준다.

1-1) 기본 문법

const memoizedCallback = useCallback(함수, 의존성배열);

• 첫 번째 인자 (함수): 메모이제이션할 콜백 함수
• 두 번째 인자 (의존성 배열): 배열 안의 값이 변경될 때만 함수를 새로 생성

1-2) 사용 예시

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b]
);

위 코드에서 a 또는 b가 변경될 때만 새로운 함수를 생성하고, 그렇지 않으면 이전에 생성한 함수를 재사용한다.

2. 왜 useCallback이 필요한가?

2-1) JavaScript 함수의 참조 동등성

JavaScript에서 함수는 객체다. 같은 로직을 가진 함수라도 매번 새로 생성하면 서로 다른 참조(reference)를 갖는다.

const func1 = () => console.log('Hello');
const func2 = () => console.log('Hello');

console.log(func1 === func2); // false - 다른 객체 참조

이것이 중요한 이유는 React가 컴포넌트를 리렌더링할 때 props의 변경 여부를 참조 비교로 판단하기 때문이다. 같은 로직의 함수라도 매번 새로 생성되면 React 입장에서는 "다른 props"로 인식되어 불필요한 리렌더링이 발생한다.

2-2) 리렌더링과 함수 재생성 문제

React 함수형 컴포넌트는 렌더링될 때마다 내부의 모든 코드가 다시 실행된다. 이는 컴포넌트 안에 선언된 함수들도 매번 새로 생성된다는 의미다.