리액트 개발 과정에서 데이터 캐싱을 위해 메모이제이션 기법이 사용될 수 있고, 이에 따라 개발자들이 useMemo와 useCallback을 활용하는케이스가 있는데요.

최근 공개된 리액트 문서에서는 어떻게 리액트를 사용해야 하는지에 대한 꽤 많은 권장 사항을 제시하고 있습니다. 리액트 코어팀이 심사 숙고해서 결정한 것임을 고려할때, 이 공식 문서의 가이드를 따르지 않는 것은 여러 비용이나 위험이 따르는 리스크가 있습니다.

여러 리스트 중에 제가 관심있게 본 사항은 useMemo, useCallback, React.memo를 캐싱할지 여부를 고려한다면 성능 문제가 발견될 때까지 캐싱을 미루세요 라는 것인데요. 이는 대부분의 경우에서 메모이제이션이 필요하지 않다는 것을 반영합니다. 정말로 캐싱이 필요한 경우라면 React개발자 디버깅 프로파일러를 이용하여 어떤 컴포넌트가 메모이제이션에서 가장 큰 이득을 볼 수 있는지 확인하고 필요한 곳에 메모이제이션을 추가하는것을 권장 하고 있습니다.

리액트에서 성능 문제는 주로 불필요한 컴포넌트 렌더링에서 발생합니다. 이에 따라 메모를 통한 캐싱보다는 불필요한 렌더링 종속성을 제거하는 것이 바람직합니다. 예를 들어, 불필요한 useEffect 사용을 줄이고, 의존성을 최소화하며, 필요한 경우 특정 객체나 함수를 컴포넌트 외부로 이동하는 것이 좋습니다

useMemo의 사용이 개발자의 개인적인 스타일로 간주되기도 했지만, useMemo의 단점으로는 코드의 가독성과 유지보수성 저하가 있습니다. 이는 useMemo 함수로 감싸고 의존성 배열을 관리해야 한다는 부담 때문인데요.

추가적으로, 리액트 팀은 장기적으로 메모이제이션을 리액트 내부에서 자동으로 처리하는 기능을 개발 중이라고 합니다. 이는 개발자들이 성능 최적화를 위해 수동으로 메모이제이션을 적용하는 번거로움을 줄이고, 리액트 애플리케이션의 전반적인 성능을 향상시킬 것으로 기대됩니다.

https://react.dev/reference/react/useMemo#should-you-add-usememo-everywhere