React] Hook : useCallback

useCallback

useMemo와 비슷하게 메모리 낭비 및 성능최적화를 위해 사용되는 hook입니다.

useMemo는 값을 저장하고 있었다고 하면, useCallback은 함수를 기억하고 있습니다.

 

컴포넌트 내부에서는 주로 간단한 함수보다는 함수 생성 자체의 비용이 클 때 사용하지만,

자식 컴포넌트에 함수를 props로 넘길 때는 해당 함수는 useCallback으로 감싸야한다.

 

const 변수 = useCallback(()⇒{}), [deps]);

 

deps에 의존성을 부여하여 해당 값이 변할 때 호출하게 됩니다.

이전에 사용했던 useEffect와 동일합니다.

 

 

---

 

 

예

 

onClick함수에 useCallback을 줌으로써 리렌더링 될 때, 함수가 다시 정의되는 것을 막을 수 있습니다.

deps 안이 비었기 때문에

AppClick버튼을 눌러서 count가 증가해도, TextClick을 했을 때 0이 찍히는 것을 확인할 수 있으며,

deps에 count를 넣어주게 되면, 증가한 count가 찍히는 것을 확인 할 수 있습니다.

 

 

---

 

 

useCallback이나 useMemo를 자주 사용하는 것도 성능저하에 원인이 된다고 합니다.
'성능 좋아지겠지' 라고 생각하고 남발하기보다는 꼭 필요한 곳에 사용하는 것이 좋을 듯싶습니다.
(나중에 따로 이유를 찾아봐야될 듯 싶습니다.)