[React] 12. useCallback을 통해 함수 재사용하기

잘못 된 내용에 대한 지적은 언제든 환영입니다.

useCallback

• 컴포넌트 리렌더링 시, deps 배열 내부 값들의 변화가 없을 경우 지정한 함수가 새로 만들어지지 않도록 하는 Hook이다.
• 리렌더링 시의 무지성 함수 재생성을 막기 때문에, useMemo와 더불어 성능 최적화에 용이하다.

useCallback 함수의 구조

useCallback(function, deps)

• function : deps 값 변화에 따라 생성하려는 함수
• deps : 함수 재생성 여부의 기준이 되는 값이 들어가는 deps 배열

함수의 얕은 비교로 알아보는 useCallback의 원리

const add1 = () => x + y;
const add2 = () => x + y;

console.log(add1 === add2); // false

• JavaScript에서 함수는 원시 값이 아닌 객체로 취급되기에, 객체 간 비교는 내용 비교가 아닌 메모리 주소에 대한 비교가 일어난다.
  👉 이를 함수의 얕은 비교라고 부른다.
• useCallback은 deps 값이 변경되지 않으면 함수의 메모리 주소를 그대로 유지한다.
  👉 다른 함수의 deps 배열에 들어가는 함수의 경우 useCallback을 사용하는 편이 성능 최적화 면에서 좋다.

useCallback 사용해 보기

콜백함수를 useCallback 함수로 감싸고, deps 배열에 콜백함수에서 사용되는 값들을 넣어주는 형태로 사용한다.

const onCreate = useCallback(() => {
  const user = {
    id: nextId.current,
    username: username,
    email: email,
  };

  setUsers([...users, user]);

  onInit();

  nextId.current += 1;
}, [username, email, users, onInit]);

References
"18. useCallback 을 사용하여 함수 재사용하기" .velopert
"React Hooks: useCallback 사용법" .daleseo
"React Hooks! useCallback편(React 17버전)" .zerocho
"React Hooks : useCallback() 함수 컴포넌트 성능 최적화" .xiubindev*