[Component & Hook]useCallback

렌더링 최적화를 위한 Hook 중 하나

useCallback

메모이제이션 기법을 이용한 Hook

함수의 재사용을 위해 사용하는 Hook

function Calculator({ x, y }) {
  const add = () => x + y;

  return (
    <>
      <div>{add()}</div>
    </>
  );
}

add 함수는 렌더링될 때 마다 새로 만들어 짐

x와 y가 바뀌지 않다면 새로 만들어질 필요가 없음

import React, { useCallback } from "react";

function Calculator({ x, y }) {
  const add = useCallback(() => x + y, [x, y]);

  return (
    <>
      <div>{add()}</div>
    </>
  );
}

자식 컴포넌트의 props로 함수를 전달해줄 때 사용 적절

---

useCallback과 참조 동등성

---

useCallback은 참조 동등성에 의존

JavaScript에서 함수는 객체, 객체는 주소를 저장, 반환하는 값이 같을 지라도 일치연산자로 비교했을 때 false가 출력

따라서 React 컴포넌트 함수 내에서 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때 예상치 못한 성능 문제를 방어