시간이 지날수록 기술이 발전을 한다.

다양한 라이브러리, 프레임워크들이 생겨나고 있다.
아마 개발자들의 편의성을 위해서 지속적으로 늘어나는게 아닐까 싶다.
오늘은 리액트쿼리에 대해서 짧게나마 알아보고자 한다.

단순히 리액트쿼리가 ~~~한 이유로 좋다. 이롭다 그런것 보다는 아래의 코드를 비교해보자

설치
npm install @tanstack/react-query

셋팅

const queryClient = new QueryClient(); // queryClient 변수 생성
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <QueryClientProvider client={queryClient}> // 감싸주기
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </QueryClientProvider>
);

리액트 쿼리 사용 전 후

특히 왔다리갔다리하면 로딩이 보이지 않는데, 그 이유는 바로 리엑트쿼리가 데이터를 캐시에 저장하기 때문이다

api.ts
export async function fetchCoins() {
  return fetch("https://api.coinpaprika.com/v1/coins").then((response) =>
    response.json()
  );
}

사용전

사용후