리액트 쿼리 캐시 데이터

브라우저에서 제이슨 데이터들을 대량으로 받는 페이지에서 잠깐 다른 화면으로 넘어갔다가 다시 되돌아오는 경우
일반적으로 모든 데이터들을 다시 받아야 합니다.

그 과정에서 어쩔수 없는 불필요한 낭비가 발생하죠

하지만 리액트 쿼리를 사용하면 해당 문제를 해결할 수 있습니다.

네트워크에서 같은 기능을 useEffect와 리액트 쿼리로 구현한 두 파일을 계속 새로고침하고 같은 페이지로 돌아가기를 시켰는데 결과적으로 시간적 차이는 못느끼겠습니다... 거의 같아요

근데 차이점은 시작점이 다르다는 것입니다
useEffect는 시작점이 패치를 실행한 컴포넌트라고 정확하게 가르킵니다.
하지만 리액트 라우터는 제가 요청한 url 주소를 가르키네요

이 부분은 챗 지피티에게 한번 물어보겠습니다.

useEffect 훅은 컴포넌트의 렌더링과 관련된 사이드 이펙트를 처리하기 위해 사용됩니다. 
useEffect 훅을 사용하여 데이터를 가져오는 경우, 
훅이 실행되는 시점은 컴포넌트가 렌더링될 때마다입니다. 
따라서 useEffect 훅의 시작점은 해당 컴포넌트의 렌더링이 시작되는 시점이 됩니다. 
그래서 useEffect 훅을 사용한 경우, fetch가 시작된 컴포넌트를 가리키는 것입니다.
반면에 리액트 쿼리는 리액트의 상태 관리 라이브러리로, 데이터 가져오기와 관련된 기능을 제공합니다. 
리액트 쿼리를 사용하여 데이터를 가져오는 경우, 
쿼리 훅이 실행되는 시점은 해당 쿼리 훅을 호출하는 컴포넌트가 렌더링될 때입니다. 
따라서 리액트 쿼리의 시작점은 내가 요청한 URL 주소를 가리키는 것입니다.
시작점이 다른 이유는 useEffect 훅과 리액트 쿼리가 서로 다른 동작 방식을 가지고 있기 때문입니다. 
useEffect 훅은 컴포넌트의 렌더링과 관련된 모든 사이드 이펙트를 처리하기 위해 사용되는 반면, 
리액트 쿼리는 데이터 가져오기와 관련된 기능을 제공하는 전용 라이브러리입니다. 
따라서 시작점이 다른 것은 각각의 라이브러리가 다른 동작 방식을 가지고 있기 때문입니다.

위의 글은 챗 지피티의 설명입니다.

요약해보자면 useEffect 훅은 리액트 쿼리보다는 좀 더 넓은 범위의 기능을 할 수 있게 설계된 일반적인 훅인것 같습니다. 랜더링을 관리하는 컴포넌트 훅이기 때문에 실행 시점은 당연히 컴포넌트가 리랜더링 되는 시점이라 fetch의 시작점도 컴포넌트가 되는 것 같네요
리액트 쿼리의 useQuery 훅은 사용하기 위해서 provider를 이용해야 하기 때문에 프로바이더 안에 있는 컴포넌트의 url 주소가 직접적으로 가르켜지는 것 같네요

혹시 이와 관련해서 틀린 점이나 더 자세한 설명이 있으면 알려주세요!!