<aside> 💡 React Query의 Cache에 대하여 알아보자 !!

</aside>

개요

백엔드 측에서 데이터를 가져오는 일은 시간이 꽤 걸리는 일이다. 만약 유저가 방금 전에 확인한 데이터를 중복해서 보는경우 매번 똑같은 데이터를 백엔드에서 받게되면 속도가 저하될 수 있다.

그걸 방지하기 위해 유저가 자주 보는 데이터를 어딘가에 저장해 두었다가 백엔드에 요청할 필요 없이 바로 보여주기 위해서 캐시 를 사용한다.

캐시

캐시란 데이터를 미리 복사해 놓는 임시 장소를 얘기한다. 저장 공간의 크기는 작지만 데이터를 가져오는 속도는 빠르다는 특징이 있다.

따라서 자주 사용하는 데이터를 캐시에 저장해둔다면 훨씬 빠르게 가져와 사용할 수 있다.

웹 브라우저는 기본적으로 캐시를 사용해 속도를 높이고 네트워크 비용을 아끼는데 사이트를 접속하여 받아 온 데이터를 캐시 형태로 저장해서 사용자가 같은 사이트에 접속하면 서버에 매번 데이터를

다시 요청하는게 아니라 저장해 놓은 데이터를 유저에게 보여준다, 이렇게 캐시를 사용하는 행위를 캐싱 이라고 한다.

데이터 라이프 사이클

리액트 쿼리에서도 캐싱을 지원한다. 매번 데이터를 백엔드측에서 받아오지 않고 저장되어 있는 데이터를 유저에게 보여주는데 이런 형태를 이해하기 위해

리액트 쿼리의 데이터 라이프 사이클일 이해해야한다.

useQuery 는 queryKey , queryFn 두가지를 이용해서 데이터를 받아온다. 그렇지만 바로 쿼리 함수가 실행되어 데이터를 받아오는 형태가아니다.