---

useCallback

• 불필요한 함수 생성을 방지하고 컴포넌트의 불필요한 렌더링을 방지(성능최적화).
• 함수를 캐시(cache)하고, [deps; dependence(의존값)] 가 변경되지 않았다면 이전의 캐시된 함수를 재사용.
• useCallback(() => {}, [deps])
• doSomething은 함수이고 a와 b가 변경될 때마다 새로운 함수를 생성.

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

언제 사용할까?

1. Props 변경시 불필요하게 렌더링이 발생하는 컴포넌트 최적화.
2. 자식 컴포넌트에 전달되는 Props가 변경될 때마다 새로운 콜백 함수 생성시.

const Parent = () => {
  const handleClick = useCallback(() => {
    console.log("Clicked!");
  }, []);

  return <Child onClick={handleClick} />;
};

const Child = ({ onClick }) => {
  return <button onClick={onClick}>Click me!</button>;
};

• [deps; dependence(의존값)]를 전달해, 함수가 생성될 때를 결정할 수 있음.
• a, b가 변경될 때마다 새로운 함수 생성.

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

useMemo vs. useCallback

• 둘다 메모이제이션(memoization) 기능.
• 메모이제이션의 대상이 가장 큰 차이점.
• useMemo는 값(리턴한 값)을 재사용.
• 즉, 함수를 재실행해 연산하지 않고, 이전 값을 사용. (대상; 계산 비용이 높은 값)
• useCallback은 함수 자체를 재사용. (대상; 자주 사용하는 콜백 함수)

---