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

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

리액트 쿼리 v5의 변화에 대해 자세히 알아보겠습니다. 이 업데이트는 많은 중요한 변화를 포함하고 있으며, 특히 함수 호출 방식, 콜백 처리, 그리고 타입스크립트 지원 등의 분야에서 변화가 이루어졌습니다.

react query v5 함수 호출 방식의 단순화

• 하나의 객체로 단일 서명 지원: 이전 버전에서는 useQuery와 같은 함수들이 여러 오버로드를 가지고 있었으나, 이제는 단일 객체 형식만을 지원합니다. 이 변경으로 인해 타입스크립트 유지 관리가 간소화되고, 런타임 시에 파라미터 유형을 확인하는 절차가 단순화됩니다.
• // 이전 useQuery(key, fn, options) // v5에서 useQuery({ queryKey, queryFn, ...options })
• 예를 들어:

react query v5 콜백 관련 변경

• useQuery에서 콜백 제거: onSuccess, onError, onSettled 등의 콜백이 useQuery에서 제거되었습니다. 이는 쿼리에 대한 처리 방식을 단순화하고, 오류 처리를 더 명확하게 만들기 위한 결정입니다.
• refetchInterval 콜백 변경: 이제 refetchInterval 콜백은 쿼리 객체만을 인자로 받습니다. 이는 콜백 호출 방식을 통일하고, select에 의해 변환된 데이터에 대한 타입 문제를 해결합니다.

타입스크립트 관련 업데이트

• 최소 타입스크립트 버전 상향: 리액트 쿼리 v5는 최소 타입스크립트 버전을 4.7로 상향 조정했습니다. 이는 타입 추론과 관련된 중요한 수정 때문입니다.
• 오류 유형의 기본값 변경: 이전에는 오류의 기본 유형이 unknown이었지만, 이제 Error로 변경되었습니다. 이 변경은 대부분의 경우 타입스크립트에서 오류 필드를 다루기 쉽게 만들어줍니다.

기타 중요한 변경 사항

• 커스텀 로거 제거: v4에서 이미 사용이 중단된 커스텀 로거가 이번 버전에서 완전히 제거되었습니다.
• cacheTime을 gcTime으로 변경: cacheTime이라는 용어가 오해의 소지가 있었기 때문에, 이를 gcTime (Garbage Collect Time)으로 변경하였습니다. 이는 쿼리가 사용되지 않을 때만 작동하는 시간을 의미합니다.
• useErrorBoundary 옵션의 이름 변경: 이제 useErrorBoundary 옵션은 throwOnError으로 이름이 변경되었습니다. 이는 기능을 더 정확하게 반영하고, React 함수 접두사 "use"와 "ErrorBoundary" 컴포넌트 이름과의 혼동을 피하기 위함입니다.

주요 기능 변경 사항

• keepPreviousData 옵션 제거: 이 옵션은 placeholderData 식별 함수를 사용하여 대체할 수 있습니다. 이전 데이터를 유지하려면 placeholderData에 식별 함수를 제공하거나 Tanstack Query의 keepPreviousData 함수를 사용하면 됩니다.
• 창 포커스 재쿼리 변경: 이제 visibilitychange 이벤트만을 사용하여 포커스 재쿼리를 수행합니다. 이는 브라우저 호환성과 관련된 문제를 해결하기 위한 결정입니다.
• 네트워크 상태 확인 방법 변경: navigator.onLine 속성에 의존하지 않고, 항상 online: true로 시작하여 online과 offline 이벤트만을 듣습니다. 이는 오프라인 앱이 인터넷 연결 없이도 서비스 워커를 통해 작동할 수 있는 경우에도 유용합니다.

개선된 프레임워크 호환성

• 커스텀 queryClient 인스턴스 사용: 이제 리액트 쿼리 훅에 커스텀 context를 전달하는 대신 커스텀 queryClient 인스턴스를 직접 전달할 수 있습니다. 이는 MicroFrontends와 같은 아키텍처에서 쿼리 클라이언트의 격리를 가능하게 하며, 다른 프레임워크에서도 같은 기능을 활용할 수 있게 합니다.

마이그레이션을 위한 지원

• 코드모드(CodeMod) 제공: 리액트 쿼리 v5는 마이그레이션을 지원하기 위해 코드모드를 제공합니다. 이 코드모드는 오버로드 제거 마이그레이션을 도와주며, 생성된 코드를 꼼꼼히 검토해야 합니다.

이러한 변경 사항들은 리액트 쿼리의 사용성과 유지 보수성을 향상시키기 위한 것으로 보입니다. 이러한 개선 사항을 이해하고 적절히 적용함으로써 개발자들은 보다 효과적으로 데이터를 관리하고 애플리케이션의 성능을 개선할 수 있을 것입니다.