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

react query v5 리액트 쿼리 v5의 주요 변경사항

리액트 쿼리 v5에서는 많은 중요한 변화가 있었습니다. 이 react query v5 변화들은 개발자들에게 보다 명확하고 간결한 코드 작성을 가능하게 하며, 라이브러리의 유지보수를 용이하게 합니다.

react query v5

1. 단일 객체 시그니처 지원: 이전 버전에서는 useQuery와 같은 함수들이 TypeScript에서 다양한 오버로딩을 지원했습니다. 이제 v5에서는 객체 형식만을 지원하여, 더욱 간결하고 명확한 코드 작성이 가능해졌습니다【7】.
2. queryClient.getQueryData 및 queryClient.getQueryState 변경: 이제 이 함수들은 queryKey만을 인자로 받습니다. 이는 API의 일관성을 높이고, 사용의 단순화를 가져옵니다【8】【9】.
3. 코드모드 제공: 리액트 쿼리는 오버로딩을 제거하는 마이그레이션을 돕기 위해 코드모드를 제공합니다. 이를 사용하여 기존 코드를 새로운 버전에 맞게 자동으로 수정할 수 있습니다【9】.
4. 콜백 제거: useQuery와 QueryObserver에서 onSuccess, onError, onSettled와 같은 콜백이 제거되었습니다. 이는 API를 더욱 간결하게 하기 위한 조치입니다【10】.
5. refetchInterval 콜백 변경: 이제 refetchInterval 콜백은 query만을 인자로 받습니다. 이는 콜백 호출 방식을 간소화하고, select에 의해 변형된 데이터의 타이핑 이슈를 해결합니다【11】.
6. useQuery에서 remove 메소드 제거: 이전에는 remove 메소드를 사용하여 쿼리 캐시에서 쿼리를 제거했지만, 이제는 queryClient.removeQueries를 사용해야 합니다【12】.
7. 최소 TypeScript 버전 업데이트: v5에서는 최소 TypeScript 버전이 4.7로 업데이트되었습니다. 이는 타입 추론과 관련된 중요한 수정 때문입니다【13】.
8. useQuery의 isDataEqual 옵션 제거: 이 옵션은 이전에 쿼리의 해결된 데이터로 이전 데이터를 사용할지 여부를 결정하는 데 사용되었습니다. 이제는 structuralSharing을 통해 동일한 기능을 달성할 수 있습니다【14】.
9. 사용자 정의 로거 제거: v4에서 이미 폐기된 사용자 정의 로거 기능이 이제 완전히 제거되었습니다【15】.
10. 지원되는 브라우저 업데이트: 브라우저 지원 목록이 업데이트되어 더 현대적이고 성능이 좋은 번들을 생성합니다【16】.
11. 프라이빗 클래스 필드 및 메소드 사용: 이제 ECMAScript의 프라이빗 클래스 기능을 사용하여 실제로 프라이빗한 필드와 메소드를 제공합니다【17】.
12. cacheTime을 gcTime으로 이름 변경: cacheTime은 쿼리가 사용되지 않을 때만 작동하며, 데이터가 "가비지 컬렉션"될 때까지의 시간을 의미합니다【18】.
13. useErrorBoundary 옵션의 이름을 throwOnError로 변경: 이는 useErrorBoundary 옵션을 더 프레임워크에 중립적이며 직관적으로 만들기 위한 변경입니다. 이제 이 옵션은 에러 발생 시 예외를 발생시키는 기능을 더 명확하게 반영합니다【19】.
14. TypeScript에서 기본 오류 타입 변경: 이제 TypeScript에서 error 필드의 기본 타입은 unknown이 아닌 Error입니다. 이는 대부분의 경우에 더 쉽게 사용할 수 있도록 하기 위한 변경입니다【20】.
15. eslint 규칙 변경: 이제 객체 구문만 지원되므로 eslint prefer-query-object-syntax 규칙이 제거되었습니다【21】.
16. keepPreviousData 옵션 제거: keepPreviousData 옵션과 isPreviousData 플래그가 제거되었으며, 이제 placeholderData와 isPlaceholderData 플래그를 사용하여 동일한 기능을 구현할 수 있습니다【22】.
17. 윈도우 포커스 재요청 변경: 이제 윈도우 포커스 재요청은 focus 이벤트 대신 visibilitychange 이벤트를 전적으로 사용합니다. 이는 브라우저 지원 변경으로 인해 가능해졌으며, 관련 문제들을 해결합니다【23】.
18. 네트워크 상태 확인 방법 변경: 이제 navigator.onLine 속성을 사용하지 않고, online과 offline 이벤트만을 듣습니다. 이는 navigator.onLine의 문제점을 해결하고, 더 정확한 네트워크 상태 확인을 가능하게 합니다【24】.
19. 커스텀 컨텍스트 프롭 제거: 이제 리액트 쿼리 훅에 커스텀 context를 전달하는 대신, 커스텀 queryClient 인스턴스를 직접 전달할 수 있습니다. 이는 프레임워크에 중립적인 접근 방식을 제공하며, 마이크로 프론트엔드에서의 격리를 용이하게 합니다.

이와 같은 변화들은 리액트 쿼리 v5를 더 강력하고 사용하기 쉬운 도구로 만들어 줍니다. 개발자들은 이러한 변경사항을 숙지하고 적절히 마이그레이션하는 것이 중요합니다.

블로그 포스팅에 포함될 주요 키워드: 리액트 쿼리 v5, TypeScript, 코드모드, useQuery, queryClient, API 변경, 프라이빗 클래스, 네트워크 상태, 마이그레이션, 프레임워크 중립적, 마이크로 프론트엔드.