개발 블로그

이번 포스트에서는 TanStack Query의 강력한 기능 중 하나인 Prefetching에 대해 알아보고, 이를 페이지네이션에서 어떻게 활용할 수 있는지 예제를 통해 설명해보겠습니다. 📌 Prefetching이란?Prefetching이란 사용자가 아직 요청하지 않은 데이터를 미리 백그라운드에서 가져오는 기능입니다. 사용자가 특정 행동을 하기 전에 필요한 데이터를 먼저 받아오기 때문에, 다음 행동을 했을 때 더 빠르고 부드러운 사용자 경험을 제공할 수 있습니다. ❗️Prefetching이 필요한 이유아래 코드는 useBookings 훅을 통해 예약 데이터를 불러오고, 페이지네이션을 구현한 예시입니다.import { useQuery, useQueryClient } from "@tanstack/rea..

이번 포스트에서는 useMutation 훅을 사용해 서버에서 데이터를 삭제(변형) 하는 방법을 소개합니다. 앞에서 배운 useQuery가 서버에서 데이터를 가져오는(fetch) 역할이었다면, useMutation은 데이터를 수정, 생성, 삭제(mutate) 할 때 사용됩니다.  🔄 Supabase에서 row 삭제하기먼저 Supabase의 API 문서에서 Deleting matching rows 예제를 참고해, 특정 캐빈 데이터를 삭제하는 코드를 작성해볼게요. 위의 문서에 있는 코드를 토대로 함수를 만들어 줍니다.export async function deleteCabin(id) { const { data, error } = await supabase.from("cabins").delete().eq("..

🪄 useQuery로 데이터 패칭하기이번 포스트에서는 TanStack Query의 핵심 훅인 useQuery를 사용해서 실제로 Supabase에서 캐빈 데이터를 불러와 보겠습니다. 아래는 CabinTable 컴포넌트 코드입니다.🔍 useQuery란?useQuery는 React 컴포넌트 안에서 서버의 데이터를 쉽게 가져오고, 로딩 상태, 에러 처리, 캐싱까지 자동으로 관리해주는 훅입니다. 기본적인 사용법은 아래와 같습니다 const { data, isLoading, error } = useQuery({ queryKey: ["key"], queryFn: fetchFunction,});  import { useQuery } from "@tanstack/react-query";import styled f..

이번 포스트에서는 TanStack Query를 프로젝트에 적용하고, 전역에서 사용할 수 있도록 셋업하는 과정을 알아보겠습니다. 1. 설치먼저 아래 명령어를 입력해 TanStack Query와 개발 도구(Devtools)를 설치합니다.npm i @tanstack/react-querynpm i @tanstack/react-query-devtools@tanstack/react-query: TanStack Query의 핵심 라이브러리로, 서버 상태 관리를 위한 기능들을 제공합니다.@tanstack/react-query-devtools: 개발 중 캐시 상태, 쿼리 상태 등을 시각적으로 확인할 수 있는 유용한 도구입니다.  2. QueryClient 생성React 앱 전체에서 쿼리 기능을 사용하려면 QueryCli..

React에서 UI 상태는 useState, useReducer 등을 통해 비교적 쉽게 관리할 수 있습니다.하지만 원격(서버) 상태는 다릅니다. 네트워크 요청, 로딩 처리, 에러 핸들링, 캐싱, 리패칭 등 신경 써야 할 것이 훨씬 많죠.이런 문제를 깔끔하게 해결해주는 도구가 바로 TanStack Query입니다 (구 이름: React Query).✅ TanStack Query는 어떤 라이브러리인가요?TanStack Query는 서버 상태(server state)를 효율적으로 관리할 수 있게 도와주는 라이브러리입니다.불필요한 코드 없이도 데이터 패칭, 로딩 처리, 캐싱 등을 자동으로 처리해주며, 사용자 경험(UX)도 자연스럽게 향상됩니다.🚀 주요 기능캐싱 (Caching)서버에서 받아온 데이터를 메모리에..