React-query 를 사용해 상태관리를 해보자
프론트엔드
React-query 를 사용해 상태관리를 해보자
두줄요약
React Query를 상태관리 관점에서 소개하며 데이터 패칭과 캐싱, 동기화 장점을 정리했습니다. 또한 useQuery와 useMutation, staleTime과 cacheTime 활용 방법을 예시로 설명했습니다.
핵심 내용
- React Query를 상태관리 라이브러리 대안으로 소개
- 데이터 패칭, 캐싱, 동기화, 로딩·에러 상태 처리 간소화
useEffect기반 코드보다 간결한useQuery,useMutation사용 예시 정리
구조와 흐름
QueryClientProvider로 최상위에서 React Query 설정queryKey와queryFn으로 조회 데이터 캐싱과 관리useQuery로 조회,useMutation과invalidateQueries로 수정 후 갱신
성능/운영 포인트
staleTime으로 데이터 재요청 시점 조절cacheTime으로 메모리 내 캐시 유지 시간 제어- Devtools로 현재 쿼리 상태를 시각적으로 확인