React Query 리액트 쿼리 v5 에서 바뀐 점

React Query 리액트 쿼리 v5에서 바뀐 점

리액트 쿼리(React Query) v5에서 바뀐 점들을 살펴보겠습니다. 이 업데이트는 여러 중요한 변경 사항들을 포함하고 있으며, 기존 코드와 호환성을 유지하기 위해서는 주의 깊은 마이그레이션이 필요합니다.

1. 단일 시그니처(Single Signature) 지원

이전 버전의 리액트 쿼리는 TypeScript에서 다양한 오버로딩(overloading)을 지원했지만, 이번 v5에서는 오직 객체 형식만을 지원합니다. 이는 코드 유지 관리를 용이하게 하며, 런타임 체크를 줄여줍니다. 예를 들어, useQuery와 useInfiniteQuery 같은 함수들이 이 변경의 영향을 받았습니다.

2. 쿼리 클라이언트(queryClient) 및 캐시(queryCache) 메소드 변경

queryClient 및 queryCache의 여러 메소드들이 객체 형식의 인자만을 받도록 변경되었습니다. 이는 함수 호출 시의 일관성을 높이고, 코드를 더 명확하게 만듭니다.

3. 쿼리 데이터 및 상태 가져오기 변경

queryClient.getQueryData 및 queryClient.getQueryState 메소드는 이제 queryKey만을 인자로 받습니다. 이는 API의 단순화를 목표로 합니다.

4. 코드모드(Codemod) 지원

v5는 코드모드를 통해 마이그레이션을 용이하게 지원합니다. 이 코드모드는 기존의 오버로딩을 제거하고 새로운 시그니처로 자동 변환하는 데 도움을 줍니다. 그러나 모든 경우를 자동으로 변환할 수는 없으므로 수동 검토가 필요합니다.

5. 쿼리 콜백(Callbacks) 제거

useQuery 및 QueryObserver에서 onSuccess, onError, onSettled 콜백이 제거되었습니다. 이 변경은 쿼리와 변이(mutations)의 일관성을 유지하기 위한 것입니다.

6. refetchInterval 콜백 변경

refetchInterval 콜백이 이제 query만을 인자로 받습니다. 이는 콜백 호출의 일관성을 높이고, 선택적 데이터 변환(select)에 따른 타입 문제를 해결합니다.

7. remove 메소드 제거

useQuery에서 remove 메소드가 제거되었습니다. 이는 쿼리가 활성 상태일 때 데이터를 제거하는 것이 적절하지 않다는 판단에 따른 것입니다.

8. TypeScript 최소 요구 버전 업데이트

TypeScript의 최소 요구 버전이 4.7로 업데이트되었습니다. 이는 타입 추론과 관련된 중요한 수정 때문입니다.

9. isDataEqual 옵션 제거

isDataEqual 옵션이 제거되고, 대신 structuralSharing을 사용할 수 있습니다. 이 변경은 쿼리 데이터의 동일성 비교 방법을 개선합니다.

10. 브라우저 지원 목록 업데이트

브라우저 지원 목록이 업데이트되어 더 현대적이고 효율적인 번들을 생성합니다.

11. 클래스 필드 및 메서드의 프라이버시 강화

리액트 쿼리는 이제 ECMAScript의 프라이빗 클래스 기능을 사용하여, 클래스의 필드와 메서드를 진정한 의미에서 프라이빗하게 만듭니다. 이는 런타임에서 외부에서의 접근을 방지합니다.

12. cacheTime을 gcTime으로 변경

cacheTime이라는 용어가 종종 오해를 불러일으켰기 때문에, 이를 gcTime(가비지 콜렉션 시간)으로 변경하였습니다. 이는 쿼리가 더 이상 사용되지 않을 때 시작되는 타이머를 의미합니다.

13. useErrorBoundary 옵션을 throwOnError으로 변경

useErrorBoundary 옵션이 throwOnError으로 이름이 변경되었습니다. 이는 기능을 더 정확하게 반영하고, 프레임워크에 구애받지 않는 명명법을 사용하기 위함입니다.

14. TypeScript에서의 기본 오류 유형 변경

TypeScript에서 기본 오류 유형이 unknown에서 Error로 변경되었습니다. 이는 대부분의 경우에 Error 객체가 발생하기 때문에 타입 작업을 용이하게 합니다.

15. 불필요한 ESLint 규칙 제거

객체 문법만 지원되므로 prefer-query-object-syntax 규칙이 더 이상 필요 없게 되어 제거되었습니다.

16. keepPreviousData 제거 및 placeholderData 기능 강화

keepPreviousData 옵션과 isPreviousData 플래그가 제거되었으며, 대신 placeholderData와 isPlaceholderData 플래그가 동일한 기능을 수행합니다. placeholderData에 정체성 함수(identity function)를 제공함으로써 이전 데이터를 유지할 수 있습니다.

17. 윈도우 포커스 리패칭 변경

윈도우 포커스 리패칭이 이제 focus 이벤트 대신 visibilitychange 이벤트를 사용합니다. 이는 지원되는 브라우저에서만 가능한 변경으로, 여러 문제를 해결합니다.

18. 네트워크 상태 감지 방식 변경

navigator.onLine 속성에 의존하지 않고, 항상 online: true로 시작하여 오직 online 및 offline 이벤트만을 감지하여 네트워크 상태를 업데이트합니다. 이는 오프라인 앱에서의 오류 발생 가능성을 줄입니다.

19. 커스텀 컨텍스트 속성 제거 및 커스텀 쿼리 클라이언트 인스턴스 지원

커스텀 context 속성 대신, 커스텀 queryClient 인스턴스를 직접 전달할 수 있게 되었습니다. 이는 리액트 외의 다른 프레임워크에서도 동일한 기능을 구현할 수 있게 합니다.

20. queryCache 메소드 변경

queryCache의 여러 메소드가 객체 형식의 인자만 받도록 변경되었습니다. 이는 쿼리 캐시 작업을 더 명확하고 일관된 방식으로 처리하기 위한 조치입니다.

21. queryClient 인스턴스 생성 옵션 변경

새로운 queryClient 인스턴스를 생성할 때 사용되는 옵션들이 변경되었습니다. 이는 쿼리 클라이언트의 구성을 더 명확하고 유연하게 만들기 위한 목적입니다.

22. 쿼리 상태 및 데이터 관리 개선

쿼리의 상태 및 데이터 관리 방법이 개선되었습니다. 이는 더 나은 성능과 사용자 경험을 제공하기 위한 변경으로, 쿼리 데이터의 접근 및 관리가 더 효율적으로 이루어집니다.

23. 오류 처리 및 로깅 개선

오류 처리 및 로깅 방식이 개선되었습니다. 이는 개발자가 오류를 더 쉽게 추적하고 해결할 수 있도록 돕기 위한 조치입니다.

24. 성능 최적화

전반적인 성능 최적화가 이루어졌습니다. 이는 애플리케이션의 반응 속도를 향상시키고, 리소스 사용을 최적화하기 위한 목적입니다.

추가적으로 리액트 쿼리 v5에서 변경된 사항들은 다음과 같습니다:

• refetchPage 제거 및 maxPages 도입: 이전 refetchPage 기능이 제거되고, 새로운 maxPages 옵션이 무한 쿼리에 도입되었습니다.

• 새로운 dehydrate API: 데이터 직렬화 및 역직렬화를 위한 새로운 API가 도입되었습니다.

• 무한 쿼리의 초기 페이지 매개변수 요구: 이제 무한 쿼리는 초기 페이지 매개변수가 필요합니다.

• 무한 쿼리의 수동 모드 제거: 무한 쿼리의 수동 모드가 제거되었습니다.

• getNextPageParam 또는 getPreviousPageParam에서 null 반환 시 다음 페이지 없음 표시: 이제 이 함수들이 null을 반환하면 더 이상 페이지가 없음을 나타냅니다.

• 서버에서의 재시도 없음: 서버 측에서 쿼리 실패 시 재시도가 수행되지 않습니다.

• loading 상태를 pending으로 변경: status: loading이 status: pending으로 변경되었으며, isLoading은 isPending으로, isInitialLoading은 isLoading으로 이름이 바뀌었습니다.

• hashQueryKey를 hashKey로 변경: 쿼리 키 해싱 함수의 이름이 변경되었습니다.

• 최소 요구 리액트 버전 18.0: 리액트 쿼리 v5는 이제 리액트 버전 18.0 이상을 요구합니다.

• QueryClientProvider에서 contextSharing 속성 제거: 이 속성이 제거되었습니다.

• 리액트 및 리액트 네이티브에서 unstable_batchedUpdates 더 이상 사용 안 함: 배치 함수로 unstable_batchedUpdates를 사용하지 않습니다.

• 수화(Hydration) API 변경: 데이터 수화 API가 변경되었습니다.

• 간소화된 낙관적 업데이트: 낙관적 업데이트의 구현이 간소화되었습니다.

• 새로운 maxPages 옵션을 통한 제한된, 무한 쿼리: 무한 쿼리에 페이지 제한을 두는 새로운 maxPages 옵션이 추가되었습니다.

• 무한 쿼리가 여러 페이지를 미리 가져올 수 있음: 이제 무한 쿼리는 여러 페이지를 미리 가져올 수 있습니다.

이상으로 리액트 쿼리 v5의 주요 변경 사항들을 살펴보았습니다. 이러한 변경 사항들은 개발자들이 리액트 쿼리를 더욱 효과적으로 사용할 수 있도록 도와줄 것입니다. 코드 업데이트 시 이러한 변경 사항들을 반드시 고려하여 마이그레이션 과정에서 유의해야 할 사항입니다.