데브허브 | DEVHUB | We are React-ing Wrongly | May Shavin | React Day by Frontend Nation 2025We are React-ing Wrongly | May Shavin | React Day by Frontend Nation 2025
- 발표자는 React 개발자들이
useCallback과 useMemo 같은 훅을 잘못 사용하고 있다고 지적합니다. 🛠️
- React의 공식 문서가 빠른 프레임워크 발전 속도를 따라가지 못해, 개발자들이 잘못된 관행(예:
useEffect 남용)을 배우게 되는 문제가 있습니다. 📚
useMemo는 '비용이 많이 드는(expensive)' 계산 결과를 캐싱하여 리렌더링을 건너뛰는 데 사용되지만, '비용이 많이 드는' 기준이 모호합니다. 💰
- 간단한 리스트 렌더링 데모에서
useMemo 사용 시 성능 향상이 미미했으며, 오히려 첫 렌더링 시간이 더 길어질 수 있음을 보여줍니다. 🐢
useMemo와 useCallback은 캐싱된 값을 메모리에 저장하며, 이 값들이 가비지 컬렉션되지 않고 남아있을 경우 브라우저 메모리를 불필요하게 차지할 수 있습니다. 🧠
useCallback은 함수 정의를 캐싱하여 컴포넌트 리렌더링을 최적화하는 데 사용되지만, 함수 생성을 막지는 못하며 주로 커스텀 훅 최적화에 적합합니다. 🎣
- 문서에 따르면 1000개 이상의 객체를 반복하는 루프가 아니면
useMemo가 필요 없을 수 있으며, 1밀리초 이상의 시간이 절약될 때만 고려할 가치가 있습니다. ⏱️
useMemo와 useCallback의 무분별한 사용은 코드 복잡성을 증가시키고, 실제 성능 이득 없이 메모리 오버헤드만 초래할 수 있습니다. 📉