리액트 쿼리 (6) 썸네일형 리스트형 React Query와 인증 & setQueryData & initialData useAuth & useUser useAuth 훅은 signin/signup/signout 함수를 제공하여 서버에 있는 사용자를 인증한다. 유저 데이터 저장은 리액트 쿼리에서 하고(이를 위해 'useUser'라는 훅이 필요하다) 서버를 호출할 때 useAuth가 사용자 데이터를 수집하여 이를 보조하는 것이다. useUser 훅은 로컬 스토리지와 쿼리 캐시에서의 유저의 상태를 유지한다. useUser는 로컬스토리지의 데이터를 로딩하여 초기 설정을 한고 유저 데이터가 변하면 리액트 쿼리의 useQuery 훅을 사용하여 서버에서부터 최신 데이터를 가져온다. (useQuery 인스턴스의 쿼리 함수가 로그인 유저의 id와 함께 서버에 요청을 보내면 서버가 그 사용자에 대한 데이터를 보내준다. 만약 로그인 한 사용.. 쿼리 특성 1 : Pre-fetching과 페이지네이션 Pre-fetching(초기 데이터 채우기) 사용자에게 보여주고 싶은 데이터가 있는데 캐시에 아직 데이터가 없는 경우, 리액트 쿼리를 사용하여 새로운 데이터를 가져오기 전에 잠시 데이터를 미리 보여줄 수 있도록, 해당 데이터를 미리 가져와 캐시에 추가하는 방법에 대해 알아보자. where to use? = 미리 채우기 옵션이 사용될 리액트 쿼리 메서드 data from? = 서버 또는 클라이언트 added to cache ? = 캐시 저장 여부 where to use? data from? added to cache ? prefetchQuery method to queryClient server yes setQueryData method to queryClient client yes placeholderD.. 커스텀 쿼리 훅(관심사 분리) & 로딩 / 에러 처리 중앙집중화 커스텀 쿼리 훅 큰 앱들에서는 각 데이터 유형에 커스텀 훅을 만드는 것은 매우 흔하다. 커스텀 쿼리 훅을 사용할 때의 이점은 다음과 같다. 다수의 컴포넌트에서 데이터에 엑세스해야 하는 경우 useQuery 호출을 다시 작성하지 않아도 된다. 다수의 useQuery 호출을 사용했다면 사용 중인 키를 헷갈릴 수 있다. 커스텀 훅을 사용해 호출한다면 키를 헷갈릴 위험이 없다. 사용하길 원하는 쿼리 함수를 혼동할 위험이 없다. 추상화를 통해 관심사 분리를 할 수 있다. 예시 코드는 다음과 같다. api 요청 코드, useQuery 구문을 커스텀 훅 파일에 넣어 관심사를 분리한다. // useTreatments.ts import { useQuery, useQueryClient } from 'react-query'.. useInfiniteQuery 무한 스크롤 사용자가 스크롤 할 때마다 새로운 데이터를 가져오는 것이다. 한 번에 모든 데이터를 가져오는 것보다 훨씬 효율적이다. 그래서 사용자가 버튼을 클릭하거나 특정 지점을 스크롤 했을 때 데이터를 가져온다. useInfiniteQuery useInfiniteQuery는 페이지네이션과는 다른 API 포맷을 요구한다. 페이지네이션에서는 현재 페이지를 컴포넌트 상태에서 추적했었다. 사용자가 새 페이지를 열기 위해 행동을 하면 쿼리 키를 업데이트하고 쿼리 키가 데이터를 업데이트 하는 방식이였다. 반면에 useInfiniteQuery는 다음 쿼리가 무엇일지 추적한다. 이 경우에는 다음 쿼리가 데이터의 일부로 반환된다. 이 객체는 데이터 배열을 가진 결과라는 프로퍼티를 가진다(results). 또한, 데이터의.. 쿼리 키 & 페이지네이션 & 데이터 pre-fetching & isLoading / isFetching & Mutation 쿼리 키 쿼리 키를 표현하는 방식에는 두 가지가 있다. 문자열 방식 => "post" 배열 방식 => ["comments", post.id] const { data, isLoading, isError, error } = useQuery( ['comments', post.id], () => fetchComments(post.id) ); 만약 배열 방식으로 쿼리 키를 표현한다면 쿼리 키를 쿼리에 대한 종속성 배열로 취급하게 된다. 따라서 쿼리 키가 변경되면 새 쿼리를 생성하여 각각의 staleTime, cacheTime 을 가지게 된다. 배열에 속해있는 값들이 전부 같으면 같은 쿼리라고 인식하여 cache 에 저장되어 있는 데이터를 이용한다. 따라서 데이터를 가져올 때 사용하는 쿼리 함수에 있는 값이 쿼리 .. React Query : React로 서버 상태 관리하기 부트캠프가 종료된 후 지금까지 원하는 스택의 학습을 위해 다양한 공식 문서, 블로그, 온라인 강의를 접하였다. 나는 한꺼번에 마음에 드는 강의를 구입하고 원하는 순서에 따라 강의를 수강하는 편이다. 가장 먼저 들었던 강의는 유데미에 있는 'React 정복 가이드'였고, 그 후에는 인프런에서 '한 입 타입스크립트'를 들었다. 두 강의 전부 기본 개념을 잡기에 충분한 강의였고, 강의를 듣고 메모가 필요한 부분은 블로그에 바로 기록해두는 방식의 학습을 했기 때문에, 때때로 복습이 필요할 때 블로그에 기록한 글들을 참고하였고 정말 큰 도움이 되었다. 이번에 들어볼 강의는 유데미에 있는 'React Query : React로 서버 상태 관리하기' 이다. 'Next.js 정복 가이드' 강의도 함께 구입했는데, Ne.. 이전 1 다음
