2025-08-01 22:17
Status:
탠스택 쿼리
- 기존 상태 관리 라이브러리들은 클라이언트 상태만 관리
- 서버에서 가져온 데이터 중 클라이언트에서 필요한 것, 즉 서버 상태를 관리하는 라이브러리 필요해짐
- 매번 API에 fetch나 axios 날리는게 아니라 필요시 우선 서버 상태, 리액트 쿼리 캐시에서 가져옴
- 캐시를 업데이트 하는 것은 커스텀 가능
핵심 기능
- 로딩, 에러 상태 관리
- 페이지네이션, 뭏한 스크롤
- 프리페칭
- 뮤테이션
- 중복 요청 제거
- 오류 재시도
- 콜백
핵심 개념
- Queries(쿼리) : 데이터 조회
- Mutations(뮤테이션): 데이터 변경
- Query Invalidation: 쿼리 무효화
useQuery
- queryKey : 쿼리 캐시 식별 고유 키, 넣을때 배열로 변수 넣는것도 가능
- queryFn: 데이터 가져오는 비동기 함수로 Promise 반환해야함
- useQuery 로 쿼리 키와 쿼리 함수 주면, 데이터와 로딩 에러 상태 등 가져와서 각 상태별 렌더링 가능.
- 직접 개발하려면 매우 어렵거나 사실상 불가능한 훅을 페치 함수 하나로
- 기본 3번 재시도, retry 값으로 커스텀 가능, QueryClient 로 전역 설정도 가능, 재시도 간격은 자동 증가
- isFetching: 데이터 현재 가져오는 중, 프리페치여도 로딩 표시 나와서 안좋음, 새로 가져온다는걸 보여줄때
- isLoading: isFetching + 캐시x : isFetching 이 true이면서 캐시된 데이터 없는 상태
const { data, isPending, isLoading, error } = useQuery({
queryKey: ['posts'],
queryFn: fetchPosts,
retry: 10 // 기본 3
})
const {
data, // 성공적으로 가져온 데이터
error, // 에러 객체
isLoading, // 첫 번째 로딩 상태
isFetching, // 백그라운드에서 데이터를 가져오는 상태
isError, // 에러 상태
isSuccess, // 성공 상태
refetch, // 수동으로 다시 가져오기
status, // 'loading' | 'error' | 'success'
fetchStatus // 'fetching' | 'paused' | 'idle'
} = useQuery({
queryKey: ['todos'],
queryFn: fetchTodos
})캐싱 관리
[[1-📚 참고 노트/강의/탠스택 쿼리 강의 정리#섹션-3-캐싱과-리페칭-설정|섹션 3 캐싱과 리페칭 설정]]
- staleTime: 데이터를 다시 가져와야할 시점 결정. 기본 0, 여전히 캐시 존재, stale 되면 refetch 트리거 작동
- gcTime: 데이터가 캐시에 얼마나 오래 유지될지 결정, 기본 5분, 이거 지나면 실제로 캐시에서 제거
- 공격적이지만 합리적인 기본값
프리페칭
- 데이터를 미리 가져와 캐시에 추가
- 기본은 stale 상태로 일단 즉시 보여주고 백그라운드에서 리패칭되면 새 데이터 보여줘서 딜레이 없게
변이, 뮤테이션(Mutation)
- 서버의 데이터 업데이트 하는 작업
- useMatation 훅 사용
- mutate 함수 반환
- 콜백 함수로 이후 단계별 처리
- 서버 상태를 쓰진 않기에 엄청난 차별화는 아니어도 상태 업데이트되고 그냥 api 호출보다는 추가 기능 좋음
const mutation = useMutation({
mutationFn: (newTodo) => {
return axios.post('/todos',newTodo)
},
onMutate: (variables) => {
// 변이가 시작되기 전
return { id: 1 } // 컨텍스트 반환 가능
},
onError: (error, variables, context) => {
// 오류 발생 시
},
onSuccess: (data, variables, context) => {
// 성공 시
},
onSettled: (data, error, variables, context) => {
// 성공이든 실패든 완료 시
},
})쿼리와 뮤테이션이 가장 핵심이고, 나머지는 아래와 검색 등에서 찾아서 쓰며 업데이트