오늘 공부한것 & 기억하고 싶은 내용
Tanstack Query란
- React Query가 Tanstack Query로 이름이 변경된것
데이터 요청 및 캐싱을 관리하기 위한 라이브러리로 API호출, 데이터 캐싱, 상태 관리등의 작업을 담당한다.(비동기 상태 관리) - 핵심 기능으로
HTTP의 GET요청과 같이 서버 데이터를 가져오는useQuery훅이 있고, POST, PUT, DELETE요청 등 변이(사이드 이펙트)를 유발하는useMutation훅이 있다.
Tanstack Query 장점
1. Data Caching을 통한 불필요한 네트워크 요청 방지
- 동일한 요청을 동시에 여러번 해도 한번만 요청을 보내어 메모리에 캐시 하므로 중복 요청이 발생하지 않아 효율적이고 간편하다.
캐싱을 통해 동일한 데이터에 대한 반복적인 비동기 데이터 호출을 방지하고, 불필요한 API 콜을 줄여 서버 부하를 줄이는 이점을 제공
2. 백그라운드 데이터 동기화
- 데이터가 변경될 때 자동으로 최신 상태로 업데이트
3. 쿼리 무효화
- 데이터가 변경되면 관련된 쿼리들을 자동으로 무효화하고 새로고침
4. 오류 및 로딩 상태 관리
- Data fetching 요청이 있을때, 이에 대한 loading, success, error, caching, refreshing 상태를 바로 얻을 수 있다.
(요청의 상태를 쉽게 추적하고, 로딩 및 오류 상태를 관리 할 수 있다)
5. 자동 업데이트
- 데이터를 주기적으로 새로 고침하거나 특정 조건에서 refetching을 수행
배운점 & 느낀점
기존 리액트 훅으로 작업했던것들에서 복잡한 상태관리, 컴포넌트 재렌더링 비효율, 캐싱의 부재등 여러 문제를 개선하기 위해 Tanstack Query를 사용하는것을 보고 코드 자체가 간결해지면서 비동기 작업에서 발생할 수 있는 다양한 에러를 방지할 수 있다는 점에서 Tansck Query를 적절히 사용하면서 작업하면 좋을것 같다.
