리액트 React/ReactQuery

3. useInfiniteQuery

useInfiniteQuery useInfiniteQuery = 몇몇 인자들이 추가된 useQuery 파라미터 값만 변경하여 동일한 useQuery 를 여러번 호출할 때 사용 => Infinite Scroll, Pagination 에 사용 가능 useInfiniteQuery 의 인자들 (Request) useQuery 에서도 사용한 인자들 queryKey queryFn ({pageParam = initialUrl}) => fetchUrl(pageParam) pageParam 은 고정 pageParam 에, 다음에 요청할 정보를 넣어줌, url 이 될 수도 있고 page(숫자)가 될 수도 있음 API 에서 다음 요청 으로 주는 정보가 무엇이냐에 따름 (new) useInfiniteQuery 의 인자들 (옵..

2. React Query 설치 및 실행 / staleTime, cacheTime / 기본 코드

React Query 설치 및 실행 React Query 설치 npm install react-query React Query Devtools 설치 npm install @tanstack/react-query-devtools query client 생성 cache 와 interact 하는 것 queryProvider 적용 cache, client config 를 제공함 3 에서 만든 query client 가 필요함 모든 자식 컴포넌트들이 queryClient 를 사용할 수 있도록 함 useQuery 실행 서버에서 데이터 가져오기 위해 사용 hook 임 Stale, staleTime Stale 해진다는것은? 만료되었다는 의미 Data 는 stale 상태 에서만 데이터를 fetching 함 componen..

1. React Query 란

React Query 란 Powerful asynchronous state management maintains cache of server data on client 클라이언트에 캐싱 되어있는 서버의 데이터 를 (최신으로) 유지 하려 함 최신의 데이터를 유지하는 React Query 캐시는 데이터를 최신의 상태로 유지함 클라이언트는 데이터가 필요하면, 서버로 요청하는 것이 아니라 React Query 의 캐시로 요청함 (React Query 가 요청하고 refetch 하고 알아서 다 함) React Query 에서 State 관리에 도움을 주는 도구들 모든 쿼리에 대한 loading, error 처리 pagination, infinite scroll prefetch - 미리 fetch 해두어서, cl..