react-query

server state 관리 라이브러리 react-query

react-query를 사용해보자

useQuery 사용법

앞서 배운 react-query로 간단하게 pagination을 구현해보았다.

prefetching 사용 / isLoading vs isFetching

작은 앱이라면 상관없지만 큰 앱을 만들 때는 custom-hook을 사용해보자

사람들이 원하는 데이터를 미리 알고 있다면, 그 데이터를 캐시에 미리 채움으로써 UX를 개선할 수 있다.이를 위해 prefetching이라는 기술을 사용한다.

useQuery를 이용하여 데이터를 불러오는 상황에서 전달하는 parameter에 따라 다른 값을 fetch 하고 싶을 때, dependency array를 사용하여 해결할 수 있다.

서버에서 받아온 데이터를 그대로 사용하는 경우도 있지만, 클라이언트 내에서 정한 기준으로 재가공한 데이터를 사용하고 싶을 때가 있다.예를 들어 사용자가 선택한 filter 값에 의해 가공된 데이터를 캐시하고자 하는 상황이다.

지주 변하지 않는 데이터임에도 불구하고 계속해서 refetch 되는 것은 낭비이다.이를 따로 설정하여 refetch를 억누를 필요가 있다.

React-Query에서 mutation의 역할은 서버에 있는 데이터를 업데이트하기 위해 서버로 네트워크 콜을 보내는 것이다.즉 Create, Update, Delete할 때 쓰인다.우리는 mutaion을 활용하기 위해 useMutation hook을 사용할 것이다.