[React] useMemo

useMemo

useCallback이 함수를 저장하듯 useMemo는 모든 종류의 데이터를 저장할 수 있다. 

memo는 memoization을 의미하고, memoization은 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술을 의미한다.

 

useMemo의 첫 번째 인자는 함수이고, 이 함수가 반환하는 것이 메모리에 저장하려는 값이다.

두 번째 인자는 의존성 배열이다. 이 배열에 넣은 값이 변경 사항이 생길 때마다 저장된 값을 다시 계산해 업데이트한다.

const { items } = props;

const sortedList = useMemo(() => {
  return items.sort((a, b) => a - b);
}, [items]);