- React 앱 성능 저하의 원인은 불필요한 계산과 렌더링이며, 메모이제이션을 통해 이를 최적화할 수 있다. 🚀
- useCallback은 함수 재정의를 방지하고, useMemo는 계산 결과를 재사용하며, React.memo는 Props 변경 여부에 따라 렌더링을 제어한다. 💡
- useMemo는 무거운 계산 최적화에, useCallback은 참조 안정성 확보에, React.memo는 불필요한 자식 컴포넌트 렌더링 방지에 효과적이다. 🎯
- 메모이제이션은 비교 연산 비용, 메모리 사용량 증가, 가비지 컬렉션 비용 등의 숨겨진 비용이 발생하므로 무분별한 사용은 지양해야 한다. 💸
- useMemo는 계산이 오래 걸리고 의존성이 거의 변하지 않을 때, useCallback은 memo로 감싼 컴포넌트에 함수를 넘길 때 유용하다. ✅
- React.memo는 동일한 Props로 자주 리렌더링되거나 렌더링 지연이 체감될 때 효과적이다. ⏱️
- 메모이제이션은 필요한 순간인지 신중하게 판단하고 도입해야 성능 향상을 기대할 수 있다. 🤔
Recommanded Videos
