리액트 쿼리 v5 에서 바뀐 점 react query v5

날짜:

 

리액트 쿼리 v5 에서 바뀐 점 react query v5

리액트 쿼리 v5에서 바뀐 점에 대해 자세히 알아보겠습니다. TanStack Query v5는 중요한 변화들을 포함하고 있으며, 이러한 변화들은 사용자의 코드에 상당한 영향을 미칠 수 있습니다.


  1. 단일 시그니처 지원: 이전 버전에서는 useQuery와 같은 함수들이 여러 오버로드를 지원했지만, v5에서는 이를 단일 객체 형식으로 통합했습니다. 이로 인해 더 간결하고 유지보수가 용이해졌습니다【7†source】.
  2. queryClient.getQueryData 및 queryClient.getQueryState 변경: 이 메소드들은 이제 queryKey만을 인자로 받습니다【8†source】【9†source】.
  3. 코드모드 지원: v5는 코드 변환을 쉽게 하기 위해 코드모드를 제공합니다. 이는 자동 변환을 시도하지만, 완벽하지 않으므로 생성된 코드를 철저히 검토해야 합니다【10†source】.
  4. 쿼리에서 콜백 제거: onSuccess, onError, onSettled 콜백이 쿼리에서 제거되었습니다. 뮤테이션에서는 변화가 없습니다【11†source】.
  5. refetchInterval 콜백 변경: 이제 query만 전달됩니다. 이는 콜백 호출 방식을 간소화하고, select에 의해 변환된 데이터에 대한 타이핑 문제를 해결합니다【12†source】.
  6. useQuery에서 remove 메소드 제거: 이전에는 쿼리를 쿼리 캐시에서 제거하는 데 사용되었지만, 이제는 queryClient.removeQueries를 사용해야 합니다【13†source】.
  7. TypeScript 최소 버전 요구 사항: TypeScript v4.7 이상이 필요합니다【14†source】.
  8. isDataEqual 옵션 제거 및 structuralSharing로 대체: useQuery에서 이전에 사용되던 isDataEqual 옵션이 제거되었고, 대신 structuralSharing을 사용할 수 있습니다【15†source】.
  9. 사용자 정의 로거 제거: 이전 버전에서 이미 폐기된 사용자 정의 로거가 v5에서 완전히 제거되었습니다【16†source】.
  10. 브라우저 지원 업데이트: 더 현대적이고 성능이 좋으며 작은 번들을 생산하기 위해 브라우저 목록이 업데이트되었습니다【17†source】.
  11. 개인 클래스 필드 및 메소드: 이제 ECMAScript의 개인 클래스 기능을 사용하여 진정한 개인 필드와 메소드를 제공합니다【18†source】.
  12. cacheTime을 gcTime으로 이름 변경: 오해의 소지가 있던 cacheTime을 더 명확하게 gcTime(Garbage Collect Time)으로 변경했습니다【19†source】.
  13. useErrorBoundary 옵션을 throwOnError으로 변경: 이는 더 프레임워크 중립적이며 기능을 더 정확하게 반영합니다【20†source】.
  14. TypeScript에서 기본 오류 타입 변경: Error가 기본 타입으로 설정되었습니다【21†source】.
  15. eslint 규칙 제거: 객체 문법만 지원되므로 eslint prefer-query-object-syntax 규칙이 필요 없어졌습니다【22†source】.
  16. keepPreviousData를 placeholderData로 대체: 이전데이터와 isPreviousData 플래그 대신 placeholderData와 isPlaceholderData 플래그를 사용합니다【23†source】.
  17. 윈도우 포커스 리페치 변경: 이제 visibilitychange 이벤트만 사용하여, 브라우저의 지원을 기반으로 기능을 개선했습니다【24†source】.
  18. 네트워크 상태 확인 방법 변경: navigator.onLine 속성에 의존하지 않고, online과 offline 이벤트에만 의존하여 정확도를 높였습니다【25†source】.
  19. 커스텀 컨텍스트 속성 제거: 이제 리액트 쿼리 훅에 직접 queryClient 인스턴스를 전달할 수 있습니다【26†source】.

이러한 변경 사항들은 리액트 쿼리 v5로의 마이그레이션을 수행할 때 고려해야 할 주요 포인트들입니다. 이러한 변화들은 개발자들이 더 효율적이고 안정적인 애플리케이션을 구축할 수 있도록 도와줄 것입니다.

키워드: 리액트 쿼리 v5, 마이그레이션, 코드모드, TypeScript, 쿼리 최적화, 콜백 제거, 네트워크 상태, 사용자 정의 로거, 브라우저 지원, ECMAScript 개인 클래스 기능, 캐시 관리, 오류 처리, eslint 규칙, 데이터 관리, 리액트 쿼리 업데이트.