[React] useCallback

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

useCallback

useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook입니다. useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook입니다.

 

js에서 함수는 객체입니다.

js에서의 객체의 특징은 객체는 메모리에 저장할때 값을저장하는게 아니라 주소를 저장합니다.

그래서 둘의 비교했을때 false가 나옵니다.

function doubleFactory(){
    return (a) => 2 * a;
}
  
const double1 = doubleFactory();
const double2 = doubleFactory();
  
double1(8); // 16
double2(8); // 16
  
double1 === double2;  // false
double1 === double1;  // true

react도 리렌더링시 함수를 새로 만들어 호출합니다. 새로 만들어진 함수는 기존함수가 아닙니다. 그러나 useCallback을 이용하여 함수 자체를 저장해서 다시 사용하면 함수는 메모리 주소 값을 저장했다 다시 사용한다는 것과 같다고 볼수 있습니다. 따라서 React 컴포넌트 함수 내에서 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때 예상치 못한 성능 문제를 막을 수 있습니다.