[React]useMemo & useCallBack

useMemo와 useCallBack은 둘 다 안 써도 React가 작동하는 데 오류는 없지만 자주 rendering 되는 것을 막는 성능최적화에 사용해야하는 Hook들이다. 

 

✅UseMemo

화면이 render될 때마다 함수가 재생성되는 것을 막기 위해 users의 값이 변할 때만 countActiveUsers함수가 다시 생성되게 한다. 

첫번째 인자로 함수를 받고 두번째 인자로 dep를 받는다.

원시값(boolean, number, string), 특정 결과값을 재사용할 때 사용한다.

 

✅UseCallBack

함수를 재사용할 때 사용하는 hook

첫번째 인자로 함수를 받고 두번째 인자로 dep Array를 받는다. 재사용하는 함수 안에 prop가 있다면 dep에 꼭 넣어주어야 dep이 바뀔 때마다 함수가 재선언되고 rendering에 반영될 수 있다.