React - useCallback

개념
함수 자체를 memoization, 즉 메모리에 저장하두었다가 필요할 때 사용
(함수도 객체. 즉 변수에 할당 가능)

이유
리엑트는 기본적으로 state가 변경하면 re-rendering이 발생되는데, re-rendering이 되는 컴포넌트 안에 있는 함수도 재생성 된다.
함수가 재생성 되는 것을 최소화 하여 성능에 이득을 본다.

re-rendering이 된다는건 해당 함수형 컴포넌트가 재호출 된다는 것이고 이 말은 함수 내부의 객체가 다시 만들어진다는 뜻
그래서 함수도 객체니 다시 만들어짐

객체는 heap에 저장이 되고, 객체를 담은 변수는 객체의 저장위치를 기억한다. 그래서 함수안에 있는 내용이 같더라도 새롭게 다시 만들어지니 저장위치가 계속 변하니 변수에 다른 메모리 주소가 저장 됨

 

하지만, 객체를 비교 한다는 말은 어차피 코드가 읽히고 메모리의 어느곳에 보관해서 비교를 해야하니 리렌더링되면서 매번 함수는 계속 만든다. 

 

그래서 성능적인 이득은 해당 함수가 useEffect에 deps에 사용되었을 때 이득을 본다.

특징
초기화 방법
deps array에 값을 넣으면, 값이 변경될 때마다 함수를 새로 만듬

const calculate = useCallback((num) => { return num + 1}, [])

useCallback 안에 state
처음 생성되었을 때 state를 기억한다.
즉, react state를 useCallback안에 넣었다면, deps array에 해당 state를 추가하지 않을 시 처음 값만 기억하고 있다.

prop으로 function을 넣을 때
만약, prop으로 function과 다른 값들과 함께 하위 컴포넌트를 선언하고,
하위 컴포넌트는 prop으로 받은 function을 useEffect안에서 사용할 때 주의하자

이유는 function 외 다른 prop또는 state가 변경될 때에도 function deps걸린 useEffect가 실행되니 useCallback을 상위 컴포넌트에서 사용하면 불필요한 재생성을 막을 수 있다.