리액트 쿼리란?
서버 데이터 요청/관리를 위한 라이브러리로, 백엔드 전용 리덕스라고 생각하면 된다. 이전엔 리덕스를 통해 FE/BE 데이터를 하나의 스토어에 담아놓고 관리했는데, 사용자에게 보여줄 데이터와 서버에 있는 데이터가 달라질 경우가 생길 수 있다. 리액트 쿼리를 사용하면 해당 문제를 해결할 수 있고, 프론트 자체 데이터와 서버 데이터를 별개의 코드로 관리함으로써 개발하는 입장에서도 훨씬 명확한 코드를 작성할 수 있게 된다.
기능
- 서버 데이터 캐싱
- 데이터가 오래되면 (fresh 상태가 아니라면) 자동으로 다시 요청
- 요청 실패 시 자동으로 다시 요청
사용방법
//App.jsx
import {QueryClient, QueryClientProvider} from 'react-query'
const queryClient= new QueryClient() //하나의 context 처럼 만듦
// 요청받아온 데이터들이 이 안에 캐싱되고, 이걸로 전체를 감싸주면
// 전역에서 캐싱된 쿼리 데이터를 사용할 수 있게 됨
function App(){
return(
<QueyryClientProvider client={queryClient}>
<컴포넌트 />
<QueyryClientProvider/>
)
}
export default AppuseQuery: GET
const {isLoading, data, error} = useQuery(쿼리 키값,axios 요청보내는 함수,{쿼리 옵션})
쿼리 키값
캐시에 대한 키값이라고 생각하면 된다. 예를 들어, 'post'라고 요청보내고나서 응답 데이터가 'post'라는 이름으로 왔을 때, 다시 'post'라는 이름으로 요청을 보내려고 한다면 그때는 캐싱된 데이터를 사용한다. 즉, 어떤 특정한 요청에 대한 식별자의 기능을 하는 것이다. 그래서 만약 쿼리 함수가 같더라도, 쿼리 키값이 다르면 새로 요청을 보낸다는 특징도 있다. [] 형태로 적는 것이 컨벤션이긴하나, 안 적어도 리액트 쿼리가 자체적으로 배열형태로 반환해준다.
쿼리 함수
axios 요청 보내는 함수
쿼리 옵션
- staleTime(데이터의 fresh 상태 유지 기간)
fresh상태: 재요청을 보내지 않아도 되는 데이터 상태(아직 오래되지 않은 상태)
stale상태: 다시 재요청을 보내야 하는 상태(오래된 상태) - cacheTime
쿼리 요청을 보낸 페이지를 보다가 다른 페이지를 보겨 될 경우 처음의 쿼리는 inactive(응답 데이터는 있지만 표시는 하지 않는 상태)가 되는데, 이 순간부터 얼마동안 데이터를 보관하고 있을지 선택하는 것 - refetchOnWindowFocus
해당 윈도우에 focus 했을 때 다시 요청을 보낼지 설정하는 것(디폴트값은 true라서 포커스할 때마다 요청함) - retry
실패한 쿼리에 대해서 재요청 횟수 지정 - refetch
다시 요청 보내기 - enabled
페이지 들어가자마자 요청보내서 받아오는 게 아니라, 특정 기능 수행 후에 받아오면 좋겠다면?
funciton Post(){
const getPosts = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
return response.data
}
const [isPrepared, setIsPrepared] = useState(false)
const { isLoading, data: posts, error } = useQuery('posts', getPosts, { enabled: isPrepared })
return문 이하...
<button onClick={() => setIsPrepared(true)}>요청보내기</button>
... 생략- onSuccess (요청 성공 시 실행) <= try
const {isLoading, data:posts, error}=useQuery('posts',getPost,{
onSuccess:(data)=>{
console.log(data)}
}- onError (요청 실패 시 실행) <= catch
- onSettled (성공, 실패 여부와 상관없이 요청 완료 시 실행) <= finally
- select (데이터 받은 후 가공처리)
const {isLoading, data:posts, error}=useQuery('posts',getPost,{
select:(data)=>{
return data.filter((item)=>item.id===1)
)}
}- 인자를 받아서 요청보내기
useQueries
여러 가지 useQuery 요청을 보내고, 해당 요청들이 다 처리된 후에 렌더링하고 싶을 때 사용
useQueries([첫번째요청(쿼리키,쿼리함수), 두번째요청, ..])
const results=useQueries([
{
queryKey:'users',
queryFn: getUsers,
},
{
queryKey:'posts',
queryFn: getPosts,
}
])
if (results.some((result)=>result.isLoading) return <>로딩중</>useMutation: POST, PUT, DELETE
mutate: 변이=> 즉, 서버에 있는 데이터 자체에 대해서 변화를 일으키겠다 는 뜻.
const {mutate,isLoading, error}=useMutation(axios요청함수)
데이터를 보내는 게 아니라 변화시킬 것이기 때문에 {}안에 data 대신 mutate함수만 들어감
useMutation()한다고해서 바로 요청가는게 아니라 mutate 함수가 나와서 실행해줘야 요청됨.
invalidateQueries
setQueryData
