minTech

React Query를 통해 프로젝트를 진행하면서, 특히 prefetch 부분을 구현하면서 생겼던 궁금한 점이 있었다. QueryClient와 useQueryClient의 차이점은 무엇인가?   서버 컴포넌트에서 prefetch를 구현할 때, UseQueryClient를 통해 queryclient를 가져오면 오류가 나길래 단순히 프로젝트에서 사용할 때에는 서버컴포넌트에서는 QueryClient를 사용하고, 클라이언트 컴포넌트에서는 useQueryClient를 사용하는구나~ 하고 넘어갔던 부분이었다.  ❌❌❌ 이렇게 넘어가면 안됨 ❌❌❌  그렇다면 QueryClient, useQueryClient에 대해 깊이 알아보고 이해해보자! React Query를 사용할 때, 먼저 QueryClient 인스턴스를 생..

1. prefetch란?페이지 내에서 특정 데이터가 사용될 것으로 생각되는 경우, 데이터를 요청하기 전에 미리 해당 데이터를 가져와 페이지에 채우는 것을 말한다. 이를 통해 페이지 초기 로딩 속도를 줄이고, 원활한 사용자의 경험성을 제공할 수 있다.  tanstack query의 공식문서에도 prefetch에 대한 부분이 자세하게 작성되어있다.특히, tanstack Query 에서는 prefetching 기능의 구체적인 용도 중에 하다가 request waterfall 을 피하는 것이라고 나와있다.  그렇다면 request waterfall(요청 폭포) 이 무엇일까?Request Waterfall데이터 요청이 다른 데이터 요청이 끝난 후에야 시작되는 경우를 말한다.function Feed() { con..