잘못 된 내용에 대한 지적은 언제든 환영입니다.
useCallback
useMemo
와 더불어 성능 최적화에 용이하다.useCallback
함수의 구조useCallback(function, deps)
function
: deps 값 변화에 따라 생성하려는 함수deps
: 함수 재생성 여부의 기준이 되는 값이 들어가는 deps 배열useCallback
의 원리const add1 = () => x + y;
const add2 = () => x + y;
console.log(add1 === add2); // false
useCallback
은 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*