useQuery export function useQuery TQueryFnData TQueryFnData는 useQuery로 실행하는 query function의 반환값을 정하는 제네릭 타입이다. TError TError는 query function의 error 형식을 정하는 제네릭 타입이다. TData TData는 data에 담기는 실질적 type을 뜻한다. useQuery의 select option으로 query function의 데이터를 2차 가공하는 경우에만 사용하는 type이다. 데이터 속성이 query fu..

useMutation query와 달리 mutation은 일반적으로 데이터를 CREATE/UPDATE/DELETE 하거나 서버 부작용을 수행하는데 사용된다. 서버 데이터를 가져오는 것은 reactive하게 동작하는 useQuery를 사용하면 되지만, 서버 데이터를 업데이트하고 생성하고 삭제하는 것은 적절하지 않다. useQuery처럼 onSuccess, onError, onSettled 콜백을 전달할 수 있으며 mutate를 호출했을 때 실행할 onMutate 콜백도 사용할 수 있다. useQuery와 마찬가지로 많은 옵션을 제공하지만 너무 많다. 자세한 내용은 공식문서를 참조하자 const { data, isLoading, mutate, mutateAsync } = useMutation(mutation..

React Query란? React Query는 데이터 Fetching, 캐싱, 동기화 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 React 라이브러리 이다. Redux, Recoil, Mobx 등의 상태관리 라이브러리들로도 충분히 가능하지만, 클라이언트 쪽의 데이터들을 관리하는데에 있어서 적합할 수는 있어도 서버 쪽의 데이터들을 관리하기에는 여러가지 처리등이 필요한 점들이 있어서 등장하게 되었다. 예를 들어서, 같은 페이지를 바라보고 있는 관리자가 있을 때, 한 관리자가 유저의 데이터를 변경하면, 다른 관리자도 그 유저의 변경된 데이터를 확인할 수 있어야 한다. 설치 최근 v4로 업그레이드 되면서 yarn add react-query or npm i react-query 이었던 설치 command가..