요청 캐싱용 라이브러리.
컴포넌트의 상태와는 관련이 없음(전역 상태를 대체x)
장점 :
->리액트 쿼리 말고 다른 라이브러리
:React-Query, RTK-Query, SWR
1.fetching
: 데이터 요청 상태
2.fresh
: 데이터가 프레시한(만료되지 않은) 상태.
컴포넌트의 상태가 변경되더라도 데이터를 다시 요청하지 않는다.
새로고침 하면 다시 fetching 한다.
3.stale
: 데이터가 만료된 상태.
데이터가 만료되었다는 것은 서버에서 한번 프론트로 데이터를 주면 그 사이에 다른 유저가 데이터를 추가, 수정, 삭제 등등 할 수 있기 때문에 만료되었다고 한다. (최신화가 필요한 데이터)
컴포넌트가 마운트, 업데이트되면 데이터를 다시 요청합니다.
fresh에서 stale로 넘어가는 시간 -> 기본값 0
inactive - 사용하지 않는 상태.
일정 시간이 지나면 가비지 콜렉터가 캐시에서 제거함
기본값 5분
delete - 가비지 콜렉터에 의해 캐시에서 제거된 상태.
fetching -> fresh -> stale -> inactive -> delete
const requestData = useQuery(쿼리 키, 쿼리 함수, 옵션);
** 쿼리 키가 다르면 호출하는 API가 같더라도 캐싱을 별도로 관리한다.
const fetchSuperHeroes = () => {
return axios.get('http://localhost:4000/superheroes');
};
// 방법1. 구조분해 X
const responseData = useQuery('super-heroes', fetchSuperHeroes);
// 방법2. 구조분해 O
const { data, isLoading, isFetching, isError, error } = useQuery('super-heroes', fetchSuperHeroes);
if(isLoading) {
return <h2>Loading...</h2>
}
if(isError) {
return <h2>{error.message}</h2> // Request failed with status code 404
}
console.log(responseData) // 아래 이미지 참조
data
: 서버 요청에 대한 데이터2.isLoading
: 캐시가 없는 상태에서의 데이터 요청 중인 상태 (true / false)
3.isFetching
: 캐시의 유무 상관없이 데이터 요청 중인 상태 (true / false)
4.isError
: 서버 요청 실패에 대한 상태 (true / false)
5.error
: 서버 요청 실패 (object)