Randomly 프로젝트 - React Query 데이터 캐싱 올바르게 사용하기

Randomly 프로젝트 - React Query 데이터 캐싱 올바르게 사용하기

 

 

 

 

🏡 GitHub : https://github.com/soohyun-dev/Randomly

GitHub - soohyun-dev/Randomly: 📑 스터디를 돕는다~! : 질문 관리 프로젝트

 

 

 

React-Query의 캐싱 기능에 대해 잘못 알고 있는 부분이 있었고, 제대로 적용을 해보았습니다.

 

---

 

이전 게시물에서 React-Query를 통해 캐싱 기능을 이용한다고 하였습니다.

 

하지만, 정작 가장 중요한 stale-Time을 설정하지 않은채로 사용을 하고 있었고 stale-Time이 default 값인 0으로 설정되어결과적으로, 캐싱기능을 사용하지 않는 이전과 다를바 없었습니다. 😓

 

staleTime과 cacheTime에 대해 새로 학습을 하고 이것을 적용하여 의도하였던 캐싱 기능을 적용해보았습니다.

 

 

staleTime 이란?

 

stale은 최신이 아닌 상태를 뜻하며, staleTime은 즉, Query의 상태가 fresh => stale 되는 시간을 의미합니다.

 

쉽게 설명하여 staleTime은 데이터가 최신 상태로 남아 있는 시간을 말합니다.

 

default 값이 0이기 때문에, 따로 staleTime을 설정하지 않으면 불러온 데이터가 바로 최신이 아닌 상태로 취급되기 때문에, 매번 새로운 데이터를 요청하게 됩니다.

 

 

제가 캐싱 기능을 사용하려는 이유는 많은 동적인 데이터 변화가 없는 페이지를 접속했을 때 매번 새로운 데이터를 불러오는 것이 비효율적이라고 생각되었기 때문입니다. 따라서, 초기에 불러온 데이터를 캐싱해두고 보여준다면 서버에 요청하는 횟수를 줄일 수 있겠다라고 판단하였습니다. 하지만, default 값이 설정되어있기 때문에 페이지를 접속할때마다 데이터를 불러오게 되었습니다.

 

이를 방지하기 위하여 stale Time을 설정합니다.

 

staleTime은 useQuery의 세번째 인자에 설정해주면됩니다.

 

5 * 60 * 1000 은 5분을 뜻하고, 저는 staleTime을 5분으로 설정하여

 

한 번 불러온 데이터를 5분동안 캐싱하도록 설정하였습니다.

 

 

이제 이렇게 해두면, 초기 데이터 호출외에는 캐싱된 데이터를 사용하여 화면에 보여주게 됩니다.

 

하지만, 또다른 문제점이 생겼습니다.

 

 

🤔 설정한 staleTime 이내에 데이터 변경이 생긴다면?

 

 

캐싱된 데이터를 보여주는 페이지가 있습니다.

 

평소에는 많은 데이터들이 새로 쌓이지 않기때문에 staleTime을 길게 가져가도 괜찮지만,

 

이렇게되면, 사용자가 글을 등록했을 시에도 그 결과물이 바로 반영이 되지 않고 설정한 staleTime이 지난 뒤에야 

 

화면에 표시가 됩니다.

 

 

캐싱되는 기능은 좋지만, 실시간 데이터 변경이 이뤄지지 않는다면 사용자 경험 측면에서 좋지 않다고 생각합니다.

 

이를 해결하기 위해서는 invalidateQueries 메서드를 사용하면 됩니다.

 

invalidateQueries 메서드는 react-query의 캐시를 무효화하고 특정 쿼리나 쿼리 그룹을 선택하여 해당되는 캐시를 다시 로드하도록 의도할 수 있습니다.

 

 

 

 

로직은 다음과 같습니다.

 

평소에는 캐싱데이터를 사용합니다. (5분 설정)

 

만약, 사용자가 5분 이내에 새로운 데이터를 작성하였다면,

 

작성을 하는 API 내에 invalidateQueries 메서드에 캐싱되고 있는 쿼리를 넣고 호출하여 캐싱 값을 무효화시켜버립니다.

 

이렇게 된다면, 게시물을 보여주는 페이지에서 캐싱 값이 없기 때문에 새로운 데이터를 호출할 것입니다.

 

따라서, 작성한 게시물이 반영된 데이터를 바로 보여줄 수 있습니다.

 

 

---

❓staleTime과 cacheTime 무슨 차이일까

 

staleTime과 cacheTime은 굉장히 헷갈리는 개념이였습니다.

 

두 개념 자체는 이해가 되지만, 사용하는 방법은 비슷하다고 느꼈기 때문입니다.

 

 

cacheTime은 메모리의 캐싱 데이터의 유효 시간을 설정하는 옵션입니다.

 

default 값은 5분이고, 쿼리가 inactive한 상태일때부터 설정한 시간이 지나면 캐싱된 값은 삭제가 됩니다.

 

중요한 점은 데이터가 불러왔을 때부터가 아닌 unmount된 시점부터. 즉, inactive된 시점부터 시작한다는 점입니다.

 

 

 

제가 이해한 대로라면,

 

staleTime은 요청한 페이지에서 데이터가 갱신되기 전까지 얼마나 오래된 데이터를 보여줄지를 설정하는 것이고, 

 

cacheTime은 한 번 요청한 데이터를 inactive 상태에서 얼마나 오래 캐싱할지를 설정하는 것을 말합니다.

 

(비슷하지만 다르죠...? ㅋㅋ)

 

cacheTime을 설정하여 캐싱을 해두면 새로운 데이터를 refetch 되는 동안 캐싱된 데이터를 보여줄 수 있기 때문입니다.

 

 

---

👨‍💻 느낀점

 

어떠한 기술을 사용하고 있을때는 내가 의도한대로 잘동작하고 있는지를 제대로 파악하는 것이 중요하다고 느꼈습니다.

 

'~~할때는 이런 기능을 사용하면 된다' 해서 적용을 할때는 그 로직에 관한 여러 개념에 대해 정확히 공부하고 그 과정이 어떠한 형식으로 이루어지는 것인지를 정확히 파악하는게 중요합니다.