728x90 728x90 Frontend/React Query6 [React Query] Mutation 개념 [React Query] Mutation 개념 Mutation은 서버에 데이터를 수정, 생성 또는 삭제하는 등의 작업을 수행하는 것을 의미하며 React Query Hook useMutation을 사용해서 수행할 수 있다. const updateMutation = useMutation((postId) => updatePost(postId)); useMutation은 일부 예외를 제외하고 useQuery와 상당히 유사하다. mutate 함수를 반환하는데 이 mutate 함수는 우리가 변경 사항을 토대로 서버를 호출할 때 사용한다. 데이터를 저장하지 않으므로 쿼리 키는 필요하지 않다. isLoading은 존재하고 캐시된 항목이 없으므로 isFetching은 존재하지 않는다. 변이에 관련된 캐시는 존재하지 않.. 2023. 11. 29. [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. 이전 1 2 다음 728x90 728x90
