[React] 컴포넌트 최적화를 위한 useCallback Hook

useMemo vs useCallback

useCallback은 useMemo와 마찬가지로 memoization 기법으로 컴포넌트를 최적화 시킨다.
useMemo는 콜백 함수가 return하는 값을 memoization하는 반면, useCallback은 첫 번째 인자로 전달한 콜백 함수 그 자체를 memoization 한다는 점에서 차이가 있다.

(☝🏼 useMemo에 대해 자세히 알고 싶다면 이전 포스팅을 봐주세요!)

useCallback 구조

useCallback(() => {
  return value;
}, [item])

useCallback은 두 개의 인자를 받는데, 첫 번째 인자는 memoization해 줄 콜백 함수, 두 번째 인자는 의존성 배열이다.

의존성 배열 내의 요소가 변경되지 않는 이상, memoization 된 함수는 다시 초기화 되지 않는다.

useCallback의 사용

자바스크립트에서의 함수는 객체의 한 종류이다.

function Component () {
  const calculate = (num) => {
    return num + 1
  }
  
   return <div>{value}</div>
};

컴포넌트는 calculate라는 함수를 가지고 있는데, 따지고 보면 calculate라는 변수 안에 함수 객체가 할당돼 있는 것이다.

컴포넌트가 렌더링 될 때마다 calculate 변수는 초기화 되기 때문에 새로 만들어진 함수 객체가 다시 할당될 것이다.

function Component () {
  const calculate = useCallback((num) => {
    return num + 1;
  },[item]);
  
    return <div>{value}</div>
};

위의 코드처럼 calculate 함수를 useCallback hook으로 감싸서 memoization 해주면 컴포넌트가 리렌더링 되더라도 함수가 초기화 되는 것을 막을 수 있다.

즉, 컴포넌트가 맨 처음 렌더링 될 때만 함수 객체를 만들어서 calculate를 초기화 해주고, 이후 렌더링 시에는 calculate 변수가 새로운 함수 객체를 다시 할당 받는 것이 아니라 이전에 할당 받은 함수 객체를 재사용 할 수 있게 되는 것이다.

---

※ 참고 자료
React 공식 문서
React Hooks에 취한다 - useCallback 짱 쉬운 강의