왜 컴포넌트 안에서 new QueryClient 사용을 지양해야 할까?

요약

// Bad
const queryClient = new QueryClient();
queryClient.invalidateQueries();

// Good
const queryClient = useQueryClient();
queryClient.invalidateQueries();

 

 

 

React Query에 대한 소개

React Query는 데이터 관리와 캐싱을 위한 강력한 도구로, 애플리케이션에서 데이터를 효율적으로 관리하는 데 큰 도움을 줍니다. 그 중요한 부분 중 하나는 QueryClient 인스턴스의 적절한 관리와 사용입니다.

 

React Query의 QueryClient는 앱 전반에서 데이터 캐싱과 관련된 주요 작업을 처리합니다. 이러한 인스턴스는 앱 내에서 하나의 전역적 상태로 유지되어야 하는데, 그 이유에는 몇 가지 중요한 이유가 있습니다.

 

new QueryClient 사용을 지양해야 하는 이유

첫째로, 컴포넌트 내부에서 매번 new QueryClient를 사용하여 인스턴스를 생성하면 데이터의 일관성과 관리가 어려워집니다. 이는 컴포넌트가 리렌더링 될 때마다 새로운 인스턴스가 생성되어 데이터의 불일치 문제를 초래할 수 있습니다.

 

둘째로, React Query의 QueryClient는 쿼리 및 뮤테이션에 대한 메모리 캐싱을 포함하여 여러 기능을 수행하는 데 최적화되어 있습니다. 따라서 컴포넌트 내부에서 이 인스턴스를 새로 생성하는 것은 비효율적이며 메모리 누수 가능성을 초래할 수 있습니다.

컴포넌트 내에서 QueryClient를 사용하는 대신, 애플리케이션의 최상위 레벨에서 한 번 생성하고 앱 전체에서 사용하는 것이 좋습니다. 이렇게 함으로써 데이터 일관성을 유지하고 효율적으로 캐시 된 데이터를 관리할 수 있습니다.

 

React Query에서 QueryClient 인스턴스를 적절하게 관리하고 전역적으로 사용함으로써, 데이터의 일관성과 관리가 용이해집니다. 컴포넌트 내에서 인스턴스를 반복 생성하는 것은 지양해야 하며, 최상위 레벨에서 한 번 생성하여 앱 전체에서 일관된 데이터 관리를 유지하는 것이 중요합니다. 이는 애플리케이션의 성능과 유지보수성에 긍정적인 영향을 미칩니다.

 

결론

useQueryClient 를 사용해야 합니다!!

 

useQueryClient를 사용하는 것은 React Query에서 전역적인 데이터 일관성을 유지하고, 중복 인스턴스 생성을 방지하여 애플리케이션의 성능과 데이터 관리를 향상하는 데 중요합니다. 컴포넌트 내부에서 새로운 QueryClient를 생성하는 것은 데이터 불일치 문제를 초래할 수 있으며, useQueryClient를 활용함으로써 전역 쿼리 클라이언트에 쉽게 접근하여 데이터를 효율적으로 관리할 수 있습니다.