tanstack query2 Prefetch로 네트워크 응답속도 줄이기 들어가며어떤 페이지에 접근했을때, 화면 구성요소가 로딩되는데 너무 오래걸려 답답했던적이 있으신가요? 화면 로딩을 오래걸리게 만드는 원인에는 서비스의 구현과 유저의 환경에 따라 천차만별이지만, 유저의 이탈을 방지하기 위해 꼭 신경써야 할 부분 중 하나입니다. 이번 포스트에서는 prefetch를 이용해 tanstack query를 이용하는 서비스에서 네트워크 응답시간을 줄이는 방법을 알아보도록 하겠습니다. 글에서 사용된 코드 라이브러리 버전은 v4를 기준으로 하겠습니다. Prefetch 란?prefetch는 이름처럼 필요한 데이터를 미리 fetch하는 기법입니다. 어떠한 페이지에 진입했을때 UI를 구성하기 위해 네트워크 요청을 보내야 한다고 하면, 이때 필요한 데이터를 기존의 요청 시점보다 조금 빨리 요청.. 2025. 8. 12. TanStack-Query 효율적으로 활용하기 이 글의 코드는 Tanstack-Query V4 코드를 기준으로 작성되었습니다. 들어가며TanStack Query (전 React-Query)는 클라이언트에서 서버 상태를 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 대표적으로 캐싱, 자동 업데이트, 로딩과 에러 등의 통신 상태에 관련된 추상화 된 인터페이스들을 제공하는데, 그 기능들이 굉장히 강력하고 편리해서 프론트엔드 생태계 전반적으로 널리 사용되는 인기있는 라이브러리가 되었습니다. 오늘은 이 TanStack Query가 지원하는 기능들을 통해 프로젝트에서 유용하게 활용했던 몇 가지 방법에 대해 정리하려 합니다. 쿼리 무효화 (Query Invalidation)캐시된 데이터를 강제로 갱신하기 위해 refetch() 를 사용하는 방법도 있지만.. 2025. 3. 4. 이전 1 다음
