React Query
리액트 쿼리를 사용하면 간결하게 패칭 로직을 작성할 수 있다.
const [isLoading, setLoading] = useState(false)
const [isError, setError] = useState(false)
const [data, setData] = useState({});
--------------------------------------------
const {status, data, error, isFetching} = useQuery(() => fetch(url))흔한 요청 방식의 문제점
- 데이터가 모든 애플리케이션 인스턴스에 공유되며 다른 사용자에 의해 임의로 변경된다.
- 데이터가 최신 여부를 보장할 수 없으며 항상 갱신이 필요하다.
- 최적화된 요청 작업을 위해 캐시를 조작할 수 있어야 한다.
useQuery
const [isLoading, setLoading] = useState(false)
const [isError, setError] = useState(false)
const [data, setData] = useState({});
useEffect(() => {
const fetchData = async () => {
setError(false)
setLoading(true)
try {
const response = await axios(url)
setData(response.data);
} catch (error) {
setError(true)
}
setLoading(false)
}
fetchData()
}, [])
---------------------------------------------
const { data, isFetching, isError, error } = useQuery('api', () => useAxios(text, 1))useMutation
데이터 생성, 업데이트, 삭제에 주로 사용된다.
queryCache
React Query는 불러온 데이터를 캐싱한다.
staleTime 옵션을 설정하지 않으면 저절로 최신의 상태를 잃게 된다.
react-query 상태
- fresh: 새롭게 추가된 쿼리 & 만료되지 않은 쿼리 -> 컴포넌트가 마운트 업데이트 되어도 재 요청 x
- fetching: 요청 중인 쿼리
- stale: 만료된 쿼리 -> 컴포넌트가 마운트,업데이트 되면 데이터 재요청
- inactive: 비활성화된 쿼리 -> 특정 시간이 지나면 가비지 컬렉터에 의해 제거
데이터 요청
- data: 서버 요청에 대한 데이터
- isLoading: 캐시가 없는 상태에서의 데이터 요청 중인 상태 (true/false)
- isFetching: 캐시의 유무 상관없이 데이터 요청 중인 상태
- error: 서버 요청 실패(object)
