useMemo

• "useMemo is a React Hook that lets you cache the result of a calculation between re-renders." - react.dev
• 처음 값을 계산 할 때 해당 값을 메모리에 저장해서, 동일한 값을 반환하는 함수를 반복적으로 호출 할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용한다.
• React Memoization (메모이제이션)
• useEffect와 비슷하게 속도를 향상시킴

useMemo

const PrimeNumbersCount = ({max}) => {
	const count = useMemo(() => getPrimeNumbersCount(max), [max]);
// max의 값이 새로 들어오면 그때 렌더링이 된다

useEffect

	const [count, setCount] = useState(0);
	
	useEffect(() => {
		const count = getPrimeNumbersCount(max);
		setCount(count);
	}, [max]);
// max의 값이 새로 들어오면 그때 렌더링이 된다

React.memo

useMemo와 비슷한 것. 이런식으로도 사용 가능~

// 새로운 버전의 컴포넌트, 기능이 추가된
const MemoizedPrimeNumbersCount = React.memo(PrimeNumbersCount);

useCallback

• useCallback도 메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜준다

useMemo와 useCallback의 차이

• useMemo에 인자로 콜백함수를 넣어주면 함수가 리턴하는 값을 메모이제이션 한다
• useCallback은 인자로 전달한 콜백 함수 그 자체를 메모이제이션 한다