🚀 시작 요즘들어 완성도 있는 좋은 프로젝트 코들를 읽는데 취미를 붙여서 읽던 중 프리패칭을 도와주는 핵심 기능인 prefetchQuery를 알아보려고 한다. 🧐 그전에 Tanstack Query로 데이터를 미리 채우는 방법에는 무엇이 있을까? ✅ prefetchQuery가장 핵심 기능인 prefetchQuery는 queryClient의 메서드로, 서버로 부터 받아온 데이터를 캐시에 추가한다. ✅ setQueryDatasetQueryData는 queryClient의 메서드로, prefetchQuery처럼 useQuery를 실행시키지 않고 쿼리 데이터를 캐시에 추가하는 또 다른 방법이다. 단, 클라이언트에서 데이터를 받아오는데, 이 데이터는 서버에서 mutation된 상태의 데이터일 것이다. ✅ pla..

query, useQuery란?    쿼리란?리액트 쿼리를 이용해 백엔드로부터 데이터를 받아오는 방법을 공부 했습니다. 백엔드로부터 데이터를 받아오기 위해 우리는 리액트 쿼리에서 제공하는 useQuery()라는 훅을 사용할 겁니다. 여기서 쿼리란 '문의하다, 질문하다'라는 뜻을 가지고 있는 단어인데요! 데이터베이스 같은 것에 우리가 필요한 데이터를 요청하는 것을 말합니다. useQuery()는 필요한 데이터를 백엔드에 요청해서 받아 오는 React Hook입니다. useQuery()사용법import { useQuery } from '@tanstack/react-query';import { getPosts } from './api';function HomePage() { const result = use..

TanStackQuery 설치하기 1. npx create-react-app .2. npm install @tanstack/react-query기본 설정import { QueryClient, QueryClientProvider } from '@tanstack/react-query';import HomePage from './HomePage';const queryClient = new QueryClient();function App() { return ( );}export default App; QueryClientProvider를 통해 App 컴포넌트의 자손 컴포넌트에 전달해 주었는데요.React Context를 배울 때 리액트 Context에서도 데이터를 전역적으로 사용하기..

TanStackQuery 개요 및 기능    서버 상태(Server State)서버 상태 데이터는 몇 가지 특징을 가지고 있습니다. 먼저 서버에서 데이터를 받아오기까지 시간이 걸리죠? 그래서 우리는 이렇게 데이터를 받아오는 걸 비동기식으로 구현합니다. 실제로 데이터를 받아 오기까지 플레이스 홀더를 보여주거나 혹은 로딩 처리를 하곤 합니다. 때로는 데이터를 받아 오는 과정에서 에러가 생길 수도 있어요. 그럴 때 이런 에러 상황을 어떻게 처리하고 어떤 식으로 유저에게 안내해 줄 것인지에 대한 고민도 필요합니다. 또한 서버 상태 데이터는 가능한 최신 상태로 유지되어야 하는데요. 데이터를 한 번 받아 오면 끝나는 게 아니라, 최신 데이터를 가능한 한 계속 받아 와야 하죠. 여기서 '가능한'이라고 표현한 이유는 ..