useCallback ?
특정 함수를 새로 만들지 않고, 필요시에만 사용하는 함수 !
값 대신에 함수 자체를 캐싱
(컴포넌트 렌더링 성능 최적화 → useCallback으로 컴포넌트 props가 변하지 않으면 렌더가 발생하지 않음)
✋ 잠깐만 ! useMemo랑 되게 비슷하잖아?
그렇다 ! 그렇기 때문에 구조와 역할도 되게 비슷하다.
다만, useMemo는? 메모이제이션 된 '값(value)'을 반환 vs. useCallback은? 메모이제이션 된 '함수(function)'자체를 반환한다는 차이점이 있음 !
useCallback 구조 ❓
const memoizedCallback = useCallback(function, deps)🔔 함수(콜백함수)를 배열형태의 함수 실행 조건값(deps)이 변경될 때까지 저장하고, 재사용
(deps 값이 바뀌지 않는 한 기존함수를 재사용함)
🌟 useCallback으로 감싼 함수는 렌더링 될 때마다 함수가 생성됨, 하지만 deps에 저장된 객체의 update가 없다면 생성된 함수를 무시하고 이전함수를 재사용 한다 !
다시 말해서, state / props를 callback안에서 사용해야 된다면 deps에 반드시 넣어야 함!
useCallback을 써야하는 경우 ❗️
🔔 불필요한 렌더를 줄이기 위해 !
👍렌더 도중에 생기는 함수를 메모이제이션해서 전달해야 할 때
👍함수의 동등성에 의해
👍자식컴포넌트에 props로 함수를 전달하는 경우
👍외부에서 값을 가져오는 api를 호출하는 경우
✚ 자바스크립트 함수 동등성 (ft. 얕은비교: 원시타입(number, string, boolean 등)값은 실제 값과 동일한가?)
자바스크립트에서 일반적으로 함수는 객체로 취급한다.
다시 말해서, 자바스크립트의 객체를 비교하는 경우 같은 값이 예상된다고 하더라도 연산자(===)로 비교시 'false'를 출력한다.
그 이유는? 객체가 메모이제이션되는 경우 주소값이 메모이제이션되는데 함수가 렌더될때 함수내부에 있는 모든 변수는 초기화된다.
이때, 객체의 주소값 또한 새로 배분되는데 이때 객체의 값이 변동했다고 판단하므로 다시 리렌더링 된다.
이때 useCallback으로 객체(함수)를 감싸주면 이러한 문제를 차단할 수 있음
결론
useCallback 적재 적소에 쓰자 !
오히려 부담되는 작업을 수 있음을 반드시 염두해두자 !
예를 들어 함수내부에서 setState 혹은 dispatch를 호출하는 경우에는 쓰지 말자! 왜냐 리액트에서 이미 useState, useDispatch에 대한 성능최적화를 보장하고 있다. setState함수와 dispatch함수는 새로 생성되지 않는다 .왜냐하면 Hooks API이기 때문이다!
참고 !
https://ko.reactjs.org/docs/hooks-reference.html#usecallback
https://narup.tistory.com/273
https://dori-coding.tistory.com/entry/React-useCallback%EA%B3%BC-useMemo-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://m.blog.naver.com/dlaxodud2388/222641701457
https://bamtory29.tistory.com/entry/Hooks-useCallback
https://youngslog.medium.com/usecallback%EA%B3%BC-react-memo%EB%A1%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0-edff1185cebd
https://mooneedev.netlify.app/Frontend/%EC%96%B8%EC%A0%9C%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C%20useCallback/
https://eunhee-programming.tistory.com/201
https://velog.io/@ashnamuh/React의-useReducer-useCallback-useMemo-제대로-알고-사용하기
https://k-developer.gitbook.io/dev/react/react-hook/usecallback
https://cocoon1787.tistory.com/798
https://velog.io/@woohm402/useCallback-알아보기
https://www.daleseo.com/react-hooks-use-callback/
https://minjung-jeon.github.io/useCallback/
https://ko.wikipedia.org/wiki/메모이제이션
