React Query 공부 (8) - dependency array & keepPreviousData

dependency array

이를 사용하는 상황

useQuery를 이용하여 데이터를 불러오는 상황에서 전달하는 parameter에 따라 다른 값을 fetch 하고 싶을 때, dependency array를 사용하여 해결할 수 있다.

즉 useEffect의 dependency array 처럼 parameter가 바뀔 때마다 data가 refetch 된다.

구현 방법

// 기존 코드
// 첫 fetch된 값에서 parameter가 변경되어도 data는 변경되지 않는다.
const { data } = useQuery('queryKey', queryFn(parameter))

// dependency array 사용
// parameter가 바뀔 때마다 refetch 된다.
const { data } = useQuery(['queryKey', parameter], queryFn(parameter)

keepPreviousData

공식문서
useQuery option에는 keepPreviousData라는 옵션이 있다.
이 옵션을 true로 해주게 되면, background에서 다음 데이터를 fetch하는 동안 화면에 이전의 데이터를 가져와 보여줄 수 있는 기능이다.

즉 다음 데이터를 fetch하는 동안, 사용자에게 아무것도 안보여주기는 뭐하니까 이전 데이터라도 보여주자 하는 옵션이다.

이 기능을 사용하면 좋을 상황과 아닌 상황이 있으니 잘 판단하여 사용하면 될 것 같아 기록한다.

사용방법

사용법은 간단하다.
useQuery 사용할 때 option 값으로 keepPrevioisData 값을 true로 해주면 된다.

const { data } = useQuery('queryKey', queryFn, { keepPreviousData : true })