최근에 했던 프로젝트에 리액트 쿼리를 활용하려고 했으나 흐지부지 쓰지 못했던게 아쉬워서다음 프로젝트에서는 제대로 사용하려고 공부하기 위한 리액트 쿼리 정리이다.

1. 로딩상태 처리하기

위와같이 useQuery훅에서 제공하는 isLoading객체 속성을 이용하면 데이터를 불러올때까지 즉, 로딩중일 때를 처리할 수 있다.

즉, 데이터 페칭이 끝날때까지는 해당 값이 true로 되어 있고 데이터 페칭이 끝난 후 false로 바뀌면 해당 분기문의 JSX를 반환하지 않고 데이터가 포함된 JSX를 반환하게 된다.

isLoading외에도 isFetching을 이용할 수 있다.

그럼 둘의 차이는 뭘까?

1-1 isFetching과 isLoading의 차이

isFetching은 비동기 쿼리(비동기 요청)가 해결되지 않았음을 의미한다. 이경우에는 아직 데이터 페칭을 완료하지 않았다는 의미이다.

isLoading은 이에 대한 하위 집합이다.

즉, isFetching이 상위 집합, isLoading이 하위 집합이다.

요청 함수, api를 요청하는 함수가 해결되지 않은 것이다.

지금은 별 차이가 없어보이지만 Pagination을 진행 할 때 캐시된 데이터가 있을 때와 없을 때를 구분할 때 중요한 개념이다.

2. 에러상태 처리하기

isError를 사용하면 처음에는 3번정도 요청을 보낸 후에 최종적으로 isError값이 true로 바뀐다.

react-query는 기본으로 3번정도 데이터 페칭을 시도한 후에 데이터 페칭에 실패했으면 데이터를 가져올 수 없다고 판별한다.

이 점을 이용해서 에러상태일때를 처리하는 것이다.

error속성은 어떤 이유로 데이터 페칭을 실패했는지 알 수 있다.

error값은 문자열이 아니므로 toString()메서드로 error가 가지고 있는 값을 문자열로 바꿔줘야 된다.