리액트 메모이제이션: React.memo vs useMemo vs useCallback

요약

1. React.memo: 전달인자(props) 값이 달라졌을 때만 리렌더한다.
2. useMemo: dependencies가 달라졌을 때만 재계산하고 그 결과를 저장한다. 그렇지 않다면 리렌더가 되더라도 가만히 둔다.
3. useCallback: dependencies가 달라졌을 때만 함수를 새로 정의한다. 그렇지 않다면 리렌더가 되더라도 저장된 함수를 호출 시에 쓴다.

useMemo vs useCallback
함수를 실행해서 그 결괏값을 저장한다면 useMemo

const App = () => {
  
	const expensiveResult = useMemo(() => {
		return heavyCalculation(data); // ← 함수를 실행하고 결괏값 저장
	}, [data]);
	// expensiveResult = 계산된 값 (숫자, 객체, 배열 등)

}

함수 자체를 저장할 땐 useCallback

// ❌ 컴포넌트 내부의 변수를 사용하는 함수는, useCallback 없인 리렌더될 때마다 새로 정의됨.
// Even if handleDelete is defined outside...
const handleDelete = (setItems, userId, id) => {
  setItems(prev => prev.filter(item => item.id !== id));
};

const App = () => {
	// ...
	return (
		<ItemList 
			onDelete={() => handleDelete(setItems, userId, id)} 
			// ❌ NEW arrow function every render!
		/>
      }
  
}

// ✅ 컴포넌트 내부 변수를 사용하는 함수는 useCallback으로 감싸면, 리렌더 되어도 기존 것을 재사용 가능
// Even if handleDelete is defined outside...
const handleDelete = (setItems, userId, id) => {
  setItems(prev => prev.filter(item => item.id !== id));
};

const App = () => {
	// ...
	const storedFunction = useCallback(
    	() => handleDelete(setItems, userId, id),
		[dependencies]
	)
    
	return (
		<ItemList 
			onDelete={storedFunction} // ✅ use stored function even if re-rendered
		/>
      }
  
}