📋 useCallback이란?

useCallback 또한 useMemo와 마찬가지로 memoization 기법으로 컴포넌트 성능을 최적화 시켜주는 훅이다.

앞서 알아본 useMemo을 복습하면 useMemo는 자주 쓰이는 값을 메모이제이션, 즉 캐싱해준다. 그리고 그 값이 필요할때 다시 계산을 하는 것이 아닌 useMemo를 통해 캐싱을 한 값을 메모리에서 꺼내와서 재사용한다.

useMemo에 인자로 콜백함수를 넣어주면 함수가 리턴하는 값을 memoization 하는 것이다.

useCallback도 이와 마찬가지다.

다른점이라면 useMemo는 값을 memoization하는 반면, useCallback은 콜백 함수 자체를 memoization하는 것이다.

---

📌 1. useCallback의 구조

const calculate = useCallback((num) => {
  return num + 1;
}, [item])

구조 또한 useMemo와 똑같다. 첫 번째 인자로 콜백 함수, 두 번째 인자로는 의존성 배열을 받는다.

다른점이라면 위에서 말했듯이 useCallback은 콜백 함수 자체를 memoization한다는 점 뿐이다.

---

📌 2. useCallback 예제 1

(좌측 바를 땡겨 코드를 확인할 수 있습니다.)

이 예제에서는 input의 값을 바꾸면 좌측 정사각형의 사이즈가 바뀌고 콘솔창에 "박스 키우기"라고 찍힌다.

또 Change Theme를 클릭하면 배경의 색이 바뀌는데 여기서 문제가 발생한다.
바로 배경 색을 변경해도 쓸데없이 콘솔창에 "박스 키우기"가 출력된다는 것이다.

이 문제를 useCallback훅을 통해 해결할 수 있다.

바로 box의 style을 결정하는 createBoxStyle이라는 함수를 useCallback훅으로 감싸면 된다.

위 예시의 좌측 바를 땡기면 주석을 통해 1번 함수와 2번 함수를 분리해놓은 것을 확인할 수 있다.

1번 함수를 주석처리하고 2번 함수의 주석을 해제하고 Change Theme를 클릭하면 더이상 콘솔 창에 "박스 키우기"가 출력되지 않는다는 것을 알 수 있다.