Memoization in React is Mostly Useless (what to do instead)
- React에서 메모이제이션(useMemo, useCallback)은 생각보다 쉽게 깨질 수 있으며, 사소한 실수 하나로 전체 메모이제이션 전략이 무너질 수 있음을 보여줍니다. 💔
- 부모 컴포넌트에서 메모이제이션되지 않은 props를 자식 컴포넌트로 전달하면, 자식 컴포넌트의 useMemo와 useCallback이 무용지물이 되어 불필요한 리렌더링을 초래합니다. 💣
- 손자 컴포넌트에서 useMemo를 사용하여 비용이 큰 연산을 최적화하더라도, 상위 컴포넌트에서 props가 변경되면 메모이제이션 효과를 볼 수 없습니다. 🎭
- HTML 엘리먼트에 props로 전달되는 함수는 메모이제이션할 필요가 없지만, useEffect의 dependency array에 사용되는 함수는 메모이제이션해야 불필요한 effect 실행을 막을 수 있습니다. 🔑
- 실제 애플리케이션에서는 컴포넌트 간의 의존성이 복잡하게 얽혀있어 메모이제이션 문제를 찾고 해결하기가 쉽지 않으며, 하나의 컴포넌트에서 발생한 문제가 전체 애플리케이션 성능에 영향을 미칠 수 있습니다. 🎯
- 메모이제이션은 모든 상황에 적용 가능한 해결책이 아니며, 때로는 메모이제이션 없이 코드를 단순하게 유지하는 것이 더 나은 선택일 수 있습니다. 💡
- React ref를 사용하여 useMemo 및 useCallback과 관련된 특정 문제를 해결할 수 있는 흥미로운 패턴이 있으며, 이는 일반적으로 잘 알려지지 않은 고급 기술입니다. 💎