[유데미] React Query : React로 서버 상태 관리하기 📍react-infinite-scroller - 해당 라이브러리에서 제공하는 InfiniteScroll 컴포넌트는 useInfiniteQuery와 호환성이 좋아 자주 쓰인다 📍InfiniteScroll 컴포넌트 - 2가지 프로퍼티가 있다 1️⃣loadMore 프로퍼티 - 더 불러올 데이터를 연결 - loadMore={fetchNextPage} 형태로 사용 2️⃣hasMore 프로퍼티 - 더 불러올 데이터가 있는지 확인 - hasMore={hasNextPage} 형태로 사용 - data는 data.pages 배열에 객체 원소 형태로 존재 1page.. 2page 등이 또 배열이므로 map을 2번 써야 한다 fetchNextPage()} h..

[유데미] React Query : React로 서버 상태 관리하기 📍useInfiniteQuery 훅스 const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({ queryKey: ["sw-people"], queryFn: ({ pageParam = initialUrl }) => fetchUrl(pageParam), getNextPageParam: (lastPage) => lastPage.next || undefined, }); 1️⃣data 2️⃣fetchNextPage - 더 많은 데이터가 필요할 때 실행할 쿼리 함수 3️⃣hasNextPage - 수집할 데이터가 있는지 없는지를 따지는 불린값 - getNextPageParam이 undefine..

[유데미] React Query : React로 서버 상태 관리하기 📍Mutation - 서버에 있는 데이터를 수정하는 네트워크 통신을 만드는 것 (e.g. 블로그 제목을 바꾸거나 등) 📍useMutation 몇가지를 제외하면 useQuery와 비슷 - mutate 함수를 반환 - 데이터를 받아오지 않으므로 query key가 없어도 됨 - isLoading만 있고 isFetching은 없음 - isError의 재시도 횟수가 디폴트 0 (useQuery는 3회) 📍jsonplaceholder API는 실제로 데이터를 삭제하거나 수정하지 않음을 주의 - 단지 삭제나 수정 결과를 반환해줌 - Delete 요청이 성공적으로 전송됐는지는 유저에게 알려줄 수 있음 📍단계 1️⃣import useMutation 2..

[유데미] React Query : React로 서버 상태 관리하기 📍Prefetching 장점 - Pagination 구현 후, 유저가 다음 또는 이전 페이지를 클릭하면 fetch가 완료될때까지 Loading element를 봐야 함 - 미리 다음 페이지를 fetch하여 cache 해두면, UI가 매끄럽게 변경되어 UX를 개선할 수 있음 📍Prefetching - cache에 data를 추가 (디폴트 : stale) - re-fetching 시 이 data를 보여줌 (data는 cacheTime 지나면 소실) - page 이외에도 유저가 미리 누를 가능성이 높은 탭에 미리 사용하면 좋음 📍사용 방법 1️⃣useQueryClient 를 import 한다 2️⃣useEffect 훅을 통해 currentPa..

[유데미] React Query : React로 서버 상태 관리하기 📍props type 부여 - 부모 컴포넌트에서 넘겨준 props는 어떻게 type을 지정할까? 부모 컴포넌트에서 export한 type을 자식 컴포넌트에서 사용하기 위해 새롭게 typing이 필요 // 1. 부모 컴포넌트에서 타입을 import import { PostType } from "./Posts"; // 2. props에 맞는 형태로 재가공 // props가 여러개일때는 post밑에 이어서 쓰면 됨 interface PostProps { post: PostType; } // ... // 3. {} 뒤에 지정 export function PostDetail({ post }: PostProps) { // ... } 📍익명 함수 형..

[유데미] React Query : React로 서버 상태 관리하기 📍React Query Dev Tools이란? - 리액트 쿼리에서 기본 제공하며, 다양한 기능을 제공 - v4 부터 직접 import하게 바뀌었음! npm i @tanstack/react-query-devtools - Development 환경에서만 보여지므로 따로 -D 옵션으로 설치할 필요는 없다 📍기능 1️⃣key에 기반하여 쿼리를 보여준다 - 쿼리들의 상태 - 마지막 업데이트 타임스탬프 2️⃣반환된 데이터를 보여준다 3️⃣쿼리 탐색기 제공 📍사용방법 1️⃣npm install 후, query client를 생성한 컴포넌트 (App) 에서 import 해준다 2️⃣Provider 내부의 최하단에 devtools를 삽입 // App.t..

[유데미] React Query : React로 서버 상태 관리하기 📍prefetching 유저가 다음 페이지로 넘어가기 전에 미리 데이터 받아와서 매끄럽게 UI 변경하는 것 📍기본적인 사용 흐름 overview 1️⃣패키지 설치 npm i @tanstack/react-query 2️⃣query client 생성 - client는 쿼리와 캐시를 관리 3️⃣QueryProvider 적용 - children에 cache, client config 제공 - query client를 값으로 취함 4️⃣useQuery 훅 사용 - 서버에 쿼리하는 훅 📍QueryProvider // app.tsx // import import { QueryClient, QueryClientProvider } from "@tanst..

[유데미] React Query : React로 서버 상태 관리하기 📍@tanstack/react-query npm i react-query 대신 npm i @tanstack/react-query 📍query key들은 배열이어야 함 - 문자열 대신 배열로 묶기 📍devtools를 따로 설치해야 함 npm i @tanstack/react-query-devtools 📍setLogger가 제거됨 - 대신 QueryClient 옵션으로 logger를 추가한다