[React] react-query 활용 정리(hook)

react-query 활용 정리

서버 상태관리를 react-query로 진행중임.
CRUD 중 R을 useQuery, CUD를 useMutation으로 처리
그렇다면 그 외 훅에 대해 알아보고 적용해보자.

핵심 개념 요약

개념	설명	예시
useQuery	데이터 읽기(GET) 전용 훅	상담 목록, 유저 정보 가져오기 등
useMutation	데이터 쓰기(POST, PUT, DELETE) 전용 훅	상담 상태 변경, 이관 등
queryKey	데이터를 구분하는 식별자 (캐시 기준)	['chat', mgrId, status]
queryFn	실제 서버에서 데이터 가져오는 함수	getChatList()
enabled	조건부 fetch를 위한 boolean	mgrId가 있을 때만 실행
refetch	수동으로 다시 요청하는 함수	버튼 클릭 시 수동 새로고침
invalidateQueries	특정 queryKey를 강제로 갱신시킴	상담 등록 후 리스트 갱신 등

옵션들

옵션	의미	주로 언제 사용
staleTime	데이터를 신선하다고 보는 시간	짧게 주면 자주 새로고침, 길게 주면 캐시 유지
cacheTime	사용하지 않더라도 캐시에 보관되는 시간	unmount 이후 재사용 목적
refetchInterval	주기적으로 요청 보내기	실시간 데이터 필요할 때
enabled	조건이 맞을 때만 실행	id 없을 때 막기 등
onSuccess / onError	요청 성공/실패 시 후처리	메시지 띄우기, 리다이렉트 등
queryClient.invalidateQueries()	특정 캐시 데이터 갱신	mutation 후 리스트 다시 불러올 때

const useChatList = (mgrId:Chat['mgrId'], status?:Chat['status'], type?:Chat['type']) => {  
  
    return useQuery({  
        queryKey: ['chat', mgrId, status, type],  
        queryFn: () => getChatList(mgrId, status, type),  
        enabled: !!mgrId,  
        staleTime: 0, // 바로 stale 처리되도록  
        refetchInterval: 6000, // 실시간 주기적 업데이트 원함  
        refetchIntervalInBackground: true, //페이지가 포커스 되면 새로고침  
    });  
};

쿼리키로 잡아둔 이름들은 다른 useMutation이 작동될 때 같이 요청이 들어가도록 처리가 됨.
같이 요청할 부분, 현재 데이터로 유지될 부분을 쿼리키로 관리가 가능하기 때문에 다양한 기능들이 붙여졌을때 상태관리하기 쉬울 것 같음.

queryKey : 데이터를 구분하는 식별자 (캐시 기준) | ['chat', mgrId, status] 등
배열 형태로 작성하며, 구조에 따라 데이터 캐싱 및 갱신 범위가 달라짐.
ex) ['chat']만 invalidate하면 모든 상담 목록 갱신,
['chat', mgrId]만 invalidate하면 특정 상담원만 갱신.
| onMutate / onSettled | 낙관적 UI, 캐시 정리 | 댓글 달기, 상태 변경 등 → UI 먼저 바꾸고 서버 응답 기다림

⚠️ 내가 자주 겪었던 문제

• useQuery가 실행되지 않음 → enabled, queryFn 확인
• 리스트 변경 후 UI에 반영 안됨 → invalidateQueries 누락 여부 확인
• 중복 요청 → queryKey 설계 체크 또는 keepPreviousData 사용 고려

---

react-query 고급 기능(나..중에 써볼듯)

기능	주요 목적	예시 상황
useInfiniteQuery	무한스크롤	상담 이력, 채팅 로그(스크롤 끝에서 추가 데이터 불러오기)
setQueryData	캐시 직접 조작	UI만 먼저 업데이트(서버까지 업데이트가 아니라 화면상 조작)
prefetchQuery	데이터 미리 가져오기	페이지 전환 미리 로딩
select	데이터 즉시 가공	상태 플래그 추가(useQuery로 불러온 후 바로 가공)
suspense	에러/로딩 통합 처리	전체 앱에 통일감
onMutate	낙관적 UI	댓글 달기, 상담 상태 변경 등(서버 응답 기다리지 않고 UI 먼저 업데이트)