728x90 728x90 분류 전체보기153 [React Query] Prefetching 개념 [React Query] Prefetching 개념 preFetching은 페이지나 컴포넌트를 렌더링하기 전에 데이터를 사전에 미리 불러오는 기능을 의미한다. 이는 사용자가 특정 페이지로 이동하거나 컴포넌트를 렌더링하기 전에 필요한 데이터를 미리 가져와서 사용자 경험을 최적화할 수 있게 해준다. 사용자가 특정 게시물 페이지에 cacheTime보다 오래 머물 수도 있다. Pagination을 구현할 때 페이지가 캐시에 없기 때문에 Next page 버튼을 누를 때마다 페이지가 로딩되길 기다려야 한다. 데이터를 미리 가져와 캐시에 넣어서 사용자가 기다릴 필요 없도록 할 수 있다. 이렇게 추후 사용자가 사용할 법한 모든 데이터에 프리페칭을 사용합니다 다수의 사용자가 웹사이트 방문 시 통계적으로 특정 탭을 누를.. 2023. 11. 28. [React Query] Query key 개념 Query key 개념 쿼리 키(queryKey)는 데이터를 식별하는 데 사용되는 고유한 식별자이다. 이 키는 useQuery, useMutation, useQueryClient 등의 훅에서 사용되며, 데이터를 가져오거나 캐시된 데이터를 식별하는 데 필요하다. const { data, isLoading, isError, error } = useQuery("comments",fetchComments); post id 별로 comments가 다르기 때문에 아래와 같이 쿼리를 사용하면 모든 쿼리가 comments 쿼리 키를 동일하게 사용하게된다. 이렇게 comments 같이 알려진 쿼리 키가 있을 때는 어떠한 트리거가 있어야만 데이터를 다시 가져오게 된다. 예를 들어 컴포넌트를 다시 마운트하거나 윈도우를 다시.. 2023. 11. 27. [React Query] React Query Devtools 사용법 React Query Devtools 사용법 React Query 개발자 도구(Dev Tools)는 앱에 추가할 수 있는 컴포넌트로 개발 중인 모든 쿼리의 상태를 표시해 준다. 또한 예상대로 작동하지 않는 경우 문제를 해결하는 데 도움이 될 수도 있다. 기본적으로 개발자 도구는 NODE_ENV 변수에 따라 프로덕션 환경에 있는지 여부가 결정된다. 즉 개발 중일 때는 개발자 도구가 표시되고 프로덕션일 때는 표시되지 않는다. import { ReactQueryDevtools } from 'react-query/devtools'; function App() { const queryClient = new QueryClient(); return ( Blog Posts ); } ReactQueryDevtools를 .. 2023. 11. 26. [React Query] React Query 설치 및 사용 방법 [React Query] React Query 설치 및 사용 방법 npm i react-query 먼저 react query를 설치하는데 여기서는 v3를 사용했다. react query의 useQuery hook을 실행하여 서버에서 데이터를 가져오려고 한다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonplaceholder.typicode.com.. 2023. 11. 25. 이전 1 2 3 4 5 6 7 8 ··· 39 다음 728x90 728x90
