[22.05.16] TIL

react-query

Server State를 관리하는 라이브러리
React 프로젝트에서 Server와 Client 사이 비동기 로직을 쉽게 다루게 해주는 도구

장점

• 자동으로 캐싱
• key값이 바뀌면 refetch
• 에러 시 요청 retry
• 서버 데이터 중복 호출 제거
  .........

react-query를 통해 관리하는 쿼리 데이터는 라이프사이클에 따라 상태를 가진다.

• fetching - 요청 중인 쿼리
• fresh - 만료되지 않은 쿼리. 컴포넌트가 마운트, 업데이트되어도 데이터를 다시 요청 X
• stale - 만료된 쿼리. 컴포넌트가 마운트, 업데이트되면 데이터를 다시 요청
• inactive - 사용하지 않는 쿼리. 일정 시간이 지나면 가비지 컬렉터가 캐시에서 제거
• delete - 가비지 컬렉터에 의해 캐시에서 제거된 쿼리

서버와 관련된 상태를 전역 상태처럼 사용할 수 있다.(QueryClient)
react-query가 Client에서 관리하는 Server State들을 Key를 통해 꺼내서 사용할 수 있다.

useQuery

데이터를 get하기 위해서 사용
https://react-query.tanstack.com/reference/useQuery

const {data, isLoading} = useQuery(
  unique key(string || array), // 배열인 경우 0: unique key, 나머지: 함수 내부 파라미터로 전달
  비동기 함수(api 호출, Promise),
  {
    ...여러 옵션들
  }
)

반환값은 객체이다. 동작의 상태(isFetching, isSuccess 등), 결과(data), error 등 API 동작에 대한 여러값과 함수를 가지고 있다.

옵션에 대해서는 좀 더 알아보고 정리해야겠다...

https://react-query.tanstack.com/overview
https://techblog.woowahan.com/6339/