728x90
반응형
1. 리액트 쿼리 install
2. 쿼리 프로바이더 가져와서 전역에 감싸기
useQuery 의존성 배열 챙기기
const {data, isError, error, isLoading} = useQuery(["post", currentPage], fetchData, {
staleTime:20000,
keepPreviousData : true
})
post : 쿼리 키
currentPage : 페이지네이션시 쓰이는 변수이자 의존성 배열
예제에서는
const [currentPage, setCurrentPage] = useState(1);
=> currentPage 가 달라지면 fetchData 호출
fetchData : staleTime이 지나면 계속 찌르는 api
keepPreviousData : 이전 페이지로 돌아가도 캐시 데이터 그대로 남아있음
근데 저렇게 구현하면 페이지 클릭할 때마다 계속 로딩바 뜸
=> 프리 패칭으로 미리 가져와서 사용자 경험 올려주기
프리 패칭
=> 가져와서 캐시에 넣어놓고 (stale data)
=> 필요할 때 가져오는 거
=> 이러면 로딩이 필요 없음
그러니까 미리 싹 가져와서 캐싱해놓고 사용자가 필요할 때 보여주는 거
prefetch 는 useQueryClient 메서드임
=> app.tsx에 놓았지만 컴포넌트 또 import해서 가져와야함
useQuery 라는 hook을 통해 queryClient을 가져올 수 있음
컴포넌트 내에서
const {useQueryClient} from "react-query";
const queryClient = useQueryClient();
상태 업데이트가 비동기로 일어나기 때문에 return 문 밑에 버튼에 바로 넣으면
업데이트 됐는지 안 됐는지 제어가 안 됨
이를 useEffect를 통해서 제어하는 게 베스트
useEffect(()=> {
const nextPage = currentPage + 1
queryClient.prefetchQuery(["posts", nextPage],()=> fetchPosts(nextPage))
},[currentPage, queryClient])
-> 쿼리가 캐시에 이미 있는지 여기서 확인함
위 코드는 currentPage +1 데이터를 미리 가져옴 => 프리 패칭
isFetching vs isLoading
isFetching
aysnc 가 해결되지 않았을 때 => true
데이터 가져오는 중
isLoading
isFetching 가 true + 해당 키에 캐시된 데이터가 없을 때
const {data, isError, error, isFetching} = useQuery(["post", currentPage], fetchData, {
staleTime:20000,
keepPreviousData : true
})
if(isFetching)return <h3>...loading</h3>
이렇게 isLoading 대신 isFetching 를 쓰면 캐시된 데이터가 있든 없든 로딩바 보여줌
staleTime
=> 데이터가 fresh->stale 상태로 변경되는데 걸리는 시간
=> fresh 일때 쿼리가 새롭게 mount 되어도 fetch 안 함
=> 설정 안 해주면 0이 디폴트 (그래서 설정 안 해주면 계속 패칭함)
cacheTime
=> 메모리에 저장된 캐싱 데이터가 유효한 시간, 설정 안 해주면 5분이 디폴트(v4는 인피니티)
=> 데이터가 inactive 상태일 때 캐싱된 상태로 남아 있는 시간
=> 쿼리가 unmount되면 데이터는 inactive되고 cacheTime 만큼 데이터는 유지됨
=> cacheTime이 지나면 가비지 콜렉터로 수집됨
=> cacheTime이 지나기 전에 다시 mount 되면, 데이터를 fetch하는 동안 캐시 데이터 보여줌
이거 너무 헷갈려서 gpt한테 물어봤다
이게 리액트 쿼리 핵심 기능인 것 같다
728x90
반응형
'TIT' 카테고리의 다른 글
리액트 쿼리 2 (0) | 2023.10.04 |
---|---|
2023.09.30, weekly memoirs (4) | 2023.09.30 |
2023.09.19, weekly memoirs (0) | 2023.09.19 |
2023.09.12, weekly memoirs (0) | 2023.09.12 |
2023.09.03, weekly memoirs (0) | 2023.09.03 |
댓글