FE (Front End) (구)/React

React, React-query 리액트 쿼리 useQuery 사용하여 get 받아오기 기초 사용 방법

B_Tae 2022. 6. 25. 00:31

이 내용은 제일 하단에 있는 링크인 udemy에 있는 "React Query : React로 서버 상태 관리하기"를 보고 요약한 내용입니다. 복습 없이 작성 된 내용이고 기억해보기 위한 기록임으로 참고하는 건 좋지만 공식문서를 꼭 확인하고 올바른 방법으로 사용하시 길 바람니다. 혹시나 보시는 분들이 있을까 하여 ....

 

 

 

React-Query , useQuery

// 설치 명령어
yarn add react-query

query는 비동기 통신을 중점으로 하는 상태관리 라이브러리이다.
기본 개념을 깊게 정리하는 것은 나중으로 미루고, 지금은 빠르게 학습 중에 있어서 내용 정리를 해보고자 한다.

 

useQuery에 장점으로는 무엇이 있을까?
데이터를 캐시에 저장하여 변동되지 않는 다면 그 데이터를 가져와 빠르게 동작할 수 있다.

그런데 이건 redux도 thunk나 sagga로 구현할 수 있고 thunk를 사용할 줄 아는데 왜 다시 query를 배우고 있을까?


사실 아직까지는 잘 모르겠다. 지금은 다른 상태관리도 작성을 해보고 싶다는 욕심과, 요청을 하는데 있어서 query가 다양한 변형이 가능할 것 같은 생각에 query를 사용해보고자 한다.

 

아직 useQuery만 학습을 했지만, 당장에 느낀점은 코드가 매우 짧다.......
아무리 toolkit으로 짧게 작성했지만 그것보다 너무나도 짧다.

사용 방법

async  function  fetchPosts(page) {
const  response = await  fetch(
........${page}`
);
return  response.json();
}

const { data, isError, error, isLoading } = useQuery(
["posts", currentPage],
() =>  fetchPosts(currentPage),
{
// 3번째는 옵션
staleTime:  2000,
// 지난 데이터를 저장하고있기 캐시에 저장
keepPreviousData:  true,
}
);

useQuery는 3가지 인자를 받는다.

  1. query key
  2. 비동기 통신하는 함수
  3. 옵션

query key

쿼리 키는 쿼리 요청에 key라고 볼 수 있다. query는 요청을 한 데이터를 캐시에 저장하는데 그 열쇠라고 볼 수 있을 것 같고, 만일 key가 같다면, 나중에 호출한 데이터로 덮어 씌우게 된다. 아마 기존 데이터가 삭제되는 걸 원하는 상황은 많지 않을 것 같아 key 값을 다르게 해야 한다.

위에서는 의존성 배열을 사용하여 배열 형태의 key를 넣었는데, 어떤 상황에 넣을 수 있는가 ?
단순히 하나의 값만 호출한다면 큰 문제는 없다.
상황을 만들어 보자면, 어떤 값을 누르면 그 값에 해당하는 데이터를 같은 화면에서 보여진다고 했을 때, 키 값이 동일하기 때문에 하나의 데이터를 받아온 후 다른 값을 눌른다해도 데이터가 변하지 않는다.

이때 의존성 배열 키를 사용한다(내가 지은 이름)
변수로 넣은 (예제에서는 page 값)이 변경될 때마다 다른 key로 불리게 된다. (["comments" , 1] 이런 형태로 ) 모든 key값이 달리지기 때문에 모든 데이터를 캐시에 잘 저장할 수 있게 되는 것이다.

비동기 함수

비동기 함수는 예제에서는 따로 작성했지만, 직접 작성해도 된다. 그리고 익명 함수를 통해 작성을 했는데, 그 이유는 인자로 들어가는 값이 달라져야 하기 때문에 익명 함수를 통해 넣었다.

옵션

useQuery에는 많은 옵션이 있다. 공식 문서가 충분히 훌륭한 상태이니 이 부분을 참고하면 좋을 것 같다.
위 옵션은 fresh 상태를 2초동안 유지한다는 옵션과, 이전 데이터를 저장한다는 옵션이다.

useQuery에서 받을 수 있는 변수

위에는 data, isLoading, isError, error를 받았지만, 더 많은 값을 받을 수 있다
data는 받은 데이터가 저장이 되고, isLoading은 로딩 상태, isError는 error 상태 error는 error 메세지를 받을 수 있다.
이게 query에 장점이지 않을 까 싶다. 한 번에 loading, error, data를 핸들링 할 수 있다는 큰 장점이 있다.
추가로 받을 수 있는 것은 마찬가지로 공식 문서를 참고해보자.

 

추가적으로 참고하면 좋을 사항.


useQuery에서 isError를 네트워크로 보면 3번을 시도한다. 이는 변경할 수 있고 기본 값이 3번을 시도한다는 것이다. useMutate는 1번...

그리고 onError라는 속성이 더 좋다고 한다. 큰 플젝을 진행할 때는 이걸 이용하자.

 

isLoading vs isFetching


값을 loading으로 받았지만 fetching으로도 받을 수 있다.
둘의 차이는 fetching이 loading을 품고있는 부모라고 보면 될 것 같다.
fetching이 true가 되는 조건은, 요청을 보내서 아직 받지 않은 상태일 경우이다. 따라서 모든 요청에서 true가 된다.
loading은 fetching이 true이고 캐시 데이터가 없을 경우이다. 즉 데이터가 남아서 요청을 보낼 필요가 없는 상황에서는 true가 되지 않는다.
요청 후 서버와 데이터가 달라 새롭게 받아오면 그 값으로 바뀌게 된다. 사용자는 뒤에서 이걸 체크하고 있는지 모른다.(loading화면이 안뜬다)

more

staleTime
음식이 상한다고 표현들을 많이 하는 것 같다.
query에서 refetching 하는 기준은 상태가 fresh가 아닌 stale 상태일 때 refetching을 하는데, 별다른 설정이 없다면 fetching되는 순간 stale상태로 변경하게 된다. 따라서 매 포커스마다 refetching을 할 수 있는데, 만일 10초 동안 refetching을 할 필요가 없다면 staleTime을 10초로 설정하는 방법으로 fresh 상태를 더 길게 유지할 수 있다.

 

cacheTime
캐시는 나중에 다시 사용할 수 있는 데이터이다.
특정 쿼리에 대한 활성 useQuery가 없다면 이 데이터는 콜드 스토리지도 저장되고, cacheTime이 지나면 이 데이터는 만료된다( 기본값 5분)
특정 쿼리에 대한 useQuery가 활성 된 후부터 시간을 재기 시작하는데, 만료되면 fetching을 할 수 없다. 즉 데이터를 다시 받아와 저장한다.

 

 

https://www.udemy.com/course/react-query-react/

 

저작자표시