[React] hook, useMemo(), useCallback()

 

useMemo는 값을 메모이제이션(memoization) 해서 불필요한 계산이나 재생성을 방지하는 React 훅

==> 값을 기억

 

기본형

const memoizedValue = useMemo(() => {
  return someExpensiveCalculation(a, b);
}, [a, b]);

 

=> someExpensiveCalculation(a, b)는 a 또는 b가 변경될 때만 실행

=> 그 외에는 이전에 계산한 값을 재사용

 

useCallback은 함수 자체를 메모이제이션(memoization) 하는 React 훅

 

기본형

const cellRenderer = useCallback(
  ({ columnIndex, key, rowIndex, style, parent }) => {
    // 셀을 어떻게 렌더링할지 정의
  },
  [columns]
);

 

=> columns가 바뀔 때만 함수 재정의

 

 

일반 함수와 비교

const handleClick = () => {
  console.log('Clicked');
};

👉 컴포넌트 리렌더될 때마다 handleClick 함수 새로 만들어짐.

 

const handleClick = useCallback(() => {
  console.log('Clicked');
}, []);

👉 리렌더되어도 같은 handleClick 함수를 계속 씀.

---

useMemo가 "값"을 기억한다면

useCallback은 "함수"를 기억

 

 

 

사용 이유
✔ 불필요한 렌더링 방지

✔ 성능 최적화