React - useCallback, useMemo 제대로 사용하자

들어가기 앞서
아래의 링크를 자세히 읽어보는 것을 추천한다.
useCallback vs useMemo
So when should I useMemo and useCallback?

요약
referential equality가 핵심이고, 이에 따라 re-rendering을 해주어야 안해주어야 하는지 판단할 줄 알아야 한다.

무지성으로 쓴다면 오히려 더 성능에 좋지 않다.

메모리를 계속 잡아먹고 있어 gc가 안됨
memo, callback을 생성하기위해 추가로 여러 함수 및 변수를 실행하기에 좀더 복잡한 연산을 해야한다.

 

useMemo
고비용 연산을 하는데 캐쉬가 필요할 때
props이 같을 경우 re-render를 하지말아야 할때
props가 같은지 비교하는건 referential equality를 참고해야한다.

 

useCallback
하위 컴포넌트 props 일부가 function일 때는 useCallback으로 선언하여 reference를 동일하게 하기 위함