102524 til

TanStack Query란?

TanStack Query는 이전에 React Query로 알려졌던 JavaScript 라이브러리이다 

 

주로 서버에서 데이터를 가져오고 캐시하고,

 

동기화하는 일을 쉽게 해준다 

 

이를 통해 개발자는 서버에서 데이터를 가져오고,

 

로딩 상태나 에러 처리를 손쉽게 관리할 수 있다 

왜 TanStack Query를 사용할까?

보통 애플리케이션에서 데이터를 가져오고 업데이트하는 과정은 복잡할 수 있다 

 

예를 들어:
1. 데이터 로딩 중에는 로딩 스피너를 보여줘야 하고,
2. 데이터가 변경되면 이를 새로 가져와서 업데이트해야 하며,
3. 캐시를 활용해 성능을 최적화할 필요도 있다

이 모든 과정을 직접 관리하기 어려운 경우가 많은데,

 

TanStack Query는 이 모든 기능을 자동으로 제공합니다.



TanStack Query의 기본 개념

Query와 Mutation
TanStack Query는 두 가지 주요 기능을 제공합니다.

1. Query: 서버에서 데이터를 가져올 때 사용됨.

예를, API에서 사용자 정보를 가져오는 것과 같다.

2. Mutation: 서버의 데이터를 변경할 때 사용됨.

예, 새로운 사용자 정보를 서버에 업데이트할 때 쓰인다 

---

 캐싱
서버에서 데이터를 가져올 때마다 네트워크 비용이 발생합니다. TanStack Query는 데이터를 **캐싱**하여 필요할 때마다 데이터를 재사용할 수 있게 합니다. 캐시된 데이터는 페이지 이동이나 새로고침을 해도 유지될 수 있어 성능이 향상됩니다.

---

TanStack Query 설치 



```bash
yarn add @tanstack/react-query
```

 QueryClient와 QueryClientProvider
TanStack Query를 사용하기 위해 먼저 QueryClient 설정해야 함 

 

QueryClient는 모든 쿼리를 관리하고 캐싱하는 역할을 한다 

```javascript
// index.js
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);



TanStack Query는 데이터 가져오기와 캐싱을 간단하게 처리할 수 있는 강력한 라이브러리이다 

 

서버와의 데이터 동기화 문제를 자동으로 관리해 주기 때문에 많은 시간과 노력을 절약할 수 있습니다.


`useQuery`와 `useMutation` 훅을 사용해 서버에서 데이터를 가져오고 업데이트할 수 있다.
자동 리패칭, 캐싱, 쿼리 무효화 등의 기능을 제공해 편리하다.