react-query 란 무엇?

React Query는 React 애플리케이션에서 데이터 가져오기와 관리하기 위한 라이브러리입니다. 이 라이브러리는 여러 가지 개념을 도입하여 데이터 요청과 캐싱, 오류 처리 등을 쉽게 관리할 수 있도록 지원합니다. 그 중에서도 staleTime과 cacheTime은 React Query의 핵심 개념 중 하나입니다.

staleTime (키워드:사용자 경험)

staleTime은 데이터가 오래된 상태로 유지되는 시간을 의미합니다.

기본적으로 React Query는 데이터를 요청한 후 staleTime이 지날 때까지는 데이터를 재요청하지 않습니다.

즉, staleTime이 지나기 전까지는 이전 요청에서 받은 캐시된 데이터를 사용합니다. 이 기능은 사용자 경험을 향상시키기 위해 유용합니다.

예를 들어, 채팅 애플리케이션에서 새로운 메시지가 도착했을 때, 바로 화면에 반영되어야 합니다. 하지만, 사용자가 페이지를 새로고침하지 않는 이상, 이전에 받은 메시지들은 staleTime이 지날 때까지 보여지게 됩니다.

cacheTime (키워드:gc-가비지컬렉터)

cacheTime은 데이터가 캐시에 저장되는 시간을 의미합니다.

cacheTime은 staleTime보다 짧거나 같아야 합니다. 기본적으로 React Query는 cacheTime이 지날 때까지 데이터를 캐시에 저장합니다.

cacheTime이 지나면, 데이터는 캐시에서 삭제됩니다. cacheTime을 설정하면, 매번 요청을 보내지 않고도 일정 시간 동안 캐시된 데이터를 사용할 수 있으므로, 네트워크 트래픽을 줄일 수 있습니다.

두 개념의 필요성

staleTime과 cacheTime은 데이터를 효율적으로 관리하고, 네트워크 트래픽을 최소화하는 데에 매우 유용한 개념입니다. 이 두 개념을 적절히 활용하면, 사용자 경험을 향상시키면서도, 네트워크 트래픽을 줄일 수 있습니다.

두개의 Time의 기본 값

staleTime

React Query에서 staleTime의 기본(default) 값은 0 (즉, 무제한)입니다. 이는 쿼리 결과가 만료되지 않는 것으로 처리됩니다. 그러나 일반적으로 데이터가 자주 업데이트되는 경우 또는 캐시된 데이터가 더 이상 유효하지 않은 경우 이 값을 감소시켜야 합니다. 이를 통해 애플리케이션의 성능을 향상시킬 수 있습니다. 따라서 staleTime 값을 정확하게 설정하여 데이터를 최신 상태로 유지할 수 있도록 하는 것이 중요합니다.

cacheTime

React Query에서 cacheTime의 기본(default) 값은 Infinity입니다. 이는 캐시된 데이터가 무제한으로 유지되도록 하는 것을 의미합니다. 그러나 일반적으로 데이터가 자주 변경되는 경우나 메모리를 절약해야하는 경우 이 값을 감소시켜야 합니다. 이를 통해 메모리 사용량을 줄이고 애플리케이션의 성능을 향상시킬 수 있습니다. 캐시된 데이터를 유지할 기간을 정확하게 설정하여 적절한 캐시 관리를 수행하는 것이 중요합니다.