리액트 쿼리

eunji lee·2022년 6월 21일
1

React_

목록 보기
8/10

리액트 쿼리

요청 캐싱용 라이브러리.

  • 컴포넌트의 상태와는 관련이 없음(전역 상태를 대체x)

  • 장점 :

  1. 서버 데이터 캐싱
  2. 데이터 피칭시 로딩, 에러처리를 한곳에서 가능
  3. prefetching, retry 등 다양한 옵션
  4. 쉬운 상태 관리

->리액트 쿼리 말고 다른 라이브러리
:React-Query, RTK-Query, SWR

React Query의 라이프 사이클

1.fetching: 데이터 요청 상태

2.fresh: 데이터가 프레시한(만료되지 않은) 상태.
컴포넌트의 상태가 변경되더라도 데이터를 다시 요청하지 않는다.
새로고침 하면 다시 fetching 한다.

3.stale: 데이터가 만료된 상태.
데이터가 만료되었다는 것은 서버에서 한번 프론트로 데이터를 주면 그 사이에 다른 유저가 데이터를 추가, 수정, 삭제 등등 할 수 있기 때문에 만료되었다고 한다. (최신화가 필요한 데이터)
컴포넌트가 마운트, 업데이트되면 데이터를 다시 요청합니다.
fresh에서 stale로 넘어가는 시간 -> 기본값 0
inactive - 사용하지 않는 상태.
일정 시간이 지나면 가비지 콜렉터가 캐시에서 제거함
기본값 5분
delete - 가비지 콜렉터에 의해 캐시에서 제거된 상태.

fetching -> fresh -> stale -> inactive -> delete

사용

const requestData = useQuery(쿼리 키, 쿼리 함수, 옵션);
  1. 쿼리 키 : 문자열 or 배열, 캐싱 처리에 있어서 중요한 개념
  2. 쿼리 함수: Promise를 리턴하는 함수, ex) axios(), fetch()
  3. 옵션 : 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) // 아래 이미지 참조

데이터 요청 옵션

  1. data : 서버 요청에 대한 데이터

2.isLoading: 캐시가 없는 상태에서의 데이터 요청 중인 상태 (true / false)

3.isFetching: 캐시의 유무 상관없이 데이터 요청 중인 상태 (true / false)

4.isError: 서버 요청 실패에 대한 상태 (true / false)

5.error: 서버 요청 실패 (object)

profile
안녕하세요! 이은지 입니다.

0개의 댓글