'📃 Front-End' 카테고리의 글 목록 (6 Page)

React Query - 변이(Mutation)

2022.10.25

변이는 서버에 데이터를 업데이트하도록 서버에 네트워크 호출을 실시 합니다. ex) 블로그 포스트를 추가하거나, 삭제 또는 변경 등 ✔ useMutation 특징 일부 예외를 제외하고 useQuery 와 상당히 유사 합니다. mutate 함수 를 반환하는데 이 함수는, 사용자의 변경 사항을 토대로 서버를 호출할 때 사용 합니다. 데이터를 저장하지 않으므로 쿼리 키는 필요하지 않습니다. isLoading 은 존재 하지만, isFetching 은 없습니다. 변이에 관련된 캐시는 존재하지 않고, 재시도 또한 기본값 입니다. 공식 문서 : Mutations 적용 더미 API 를 사용하므로 실제로 변이를 적용 할 수는 없지만, 변이가 진행되는 동안 어떤 일이 일어나는지 대해 사용자에게 이를 알려주는 방법에 대해 살..

📃 Front-End/React.js

React Query - isFetching VS. isLoading

2022.10.25

isFetching 비동기 쿼리 함수가 해결되지 않았을 때 해당 합니다. ( 아직 데이터를 가져오는 중 ) isLoading isFetching이 진행 중이고, 쿼리에 대해 캐시된 데이터가 없는 상태를 말합니다. 즉, isLoading 상태이면 isFetching 또한 진행 중인 상태 입니다. ( 동시에 true ) isLoading 은 캐시된 데이터가 없고, 데이터를 가져오는 상황에 해당하는 isFetching 의 부분 집합 입니다. 예시 const {data, isLoading, isError, error} = useQuery(['posts', currentPage], () => fetchPosts(currentPage), {staleTime : 2000, keepPreviousData : true}..

📃 Front-End/React.js

React Query - 데이터 프리패칭(Pre-fetching)

2022.10.25

페이지 매김(Pagination)을 구현한 지난 포스팅에서는 사용자 경험이 좋지 않았습니다. 페이지가 캐시에 없기 때문입니다. Next Page 버튼을 누를 때마다 페이지가 로딩되길 기다려야 했습니다. 이번에는 데이터를 미리 가져와 캐시에 넣어서 사용자 경험을 개선 하겠습니다. Prefetching ❓ 프리패칭은 데이터를 캐시에 추가하며 , 구성할 수 있긴 하지만 기본값으로 만료(stale) 상태 입니다. 즉, 데이터를 사용하고자 할 때 만료 상태에서 데이터를 다시 가져옵니다. 데이터를 가져오는 중에는 캐시에 있는 데이터를 이용해 화면에 나타냅니다. 물론 캐시가 만료되지 않았다는 가정하에 일 입니다. 이렇게 추후 사용자가 사용할 법한 모든 데이터에 프리패칭을 사용 합니다. 페이지 매김, 다수의 사용자가 ..

📃 Front-End/React.js

React Query - 페이지 매김(Pagination)

2022.10.25

현재 페이지(current Page) 상태를 통해, 현재 페이지를 파악하는 페이지 매김 방법 댓글에서 작업했던 것처럼 페이지마다 다른 쿼리 키 가 필요 합니다. 따라서, 쿼리 키를 배열 로 업데이트해서 가져오는 페이지 번호를 포함 하도록 하겠습니다. 사용자가 다음, 또는 이전 페이지로 가는 버튼을 누르면 currentPage 상태를 업데이트 합니다. 그럼 React Query 가 바뀐 쿼리 키를 감지하고 새로운 쿼리를 실행해서 새 페이지가 표시됩니다. ✔ Posts.js import React, { useState } from "react"; import { useQuery } from "react-query"; import { PostDetail } from "./PostDetail"; const ma..

📃 Front-End/React.js

React Query - 쿼리 키

2022.10.25

✔ Posts.js import React, { useState } from "react"; import { useQuery } from "react-query"; import { PostDetail } from "./PostDetail"; const maxPostPage = 10; async function fetchPosts() { const response = await fetch( "https://jsonplaceholder.typicode.com/posts?_limit=10&_page=0" ); return response.json(); } export function Posts() { const [currentPage, setCurrentPage] = useState(0); const [sel..

📃 Front-End/React.js

React Query - staleTime vs cacheTime

2022.10.25

Stale Data ( 만료된 데이터 ) ❓ 예를 들어 오래된 식빵과 비슷하다고 할 수 있습니다. React Query 에서 데이터가 만료됐다는 것은 무슨 뜻인가 ❓ 데이터 리패칭(Refetching) 은 만료된 데이터 에서만 실행 됩니다. 예를 들어, 컴포넌트가 다시 마운트되거나 윈도우가 다시 포커스 되었을 때가 있습니다. staleTime 은 데이터를 허용하는 '최대 나이' 라고 할 수 있습니다. 달리 말하면, 데이터가 만료됐다고 판단하기 전까지 허용되는 시간 이 staleTime 입니다. '웹사이트에 표시된 데이터가 10초 까지는 그대로여도 괜찮다' 라고 판단하면 staleTime 을 10초로 설정 합니다. stale 한 데이터를 사용자에게 보여주는 것은 유의미하지 않다고 React Query는 판..

📃 Front-End/React.js

React Query - Dev Tools

2022.10.25

React Query 개발자 도구는 앱에 추가할 수 있는 컴포넌트로 개발 중인 모든 쿼리의 상태를 표시 해줍니다. 또한 예상대로 작동하지 않는 경우 문제를 해결하는 데 도움이 될 수도 있습니다. 쿼리 키로 쿼리를 표시해 주고 활성(active), 비활성(inactive), 만료(stale) 등 모든 쿼리의 상태를 알려줍니다. 마지막으로 업데이트된 타임 스탬프도 알려줍니다. 쿼리에 의해 반환된 데이터를 탐색할 수 있는 데이터 탐색기도 있습니다. 쿼리를 볼 수 있는 쿼리 탐색기도 있습니다. 공식 문서 ✔ 개발자 도구 문서에서 주목하고 싶은 한 가지 프로덕션 번들에 포함되어 있지 않다는 점 입니다. NODE_ENV 변수에 따라 프로덕션 환경에 있는지 여부가 결정 됩니다. CRA 는 npm run build 를..

📃 Front-End/React.js

React Query - 로딩 및 오류 상태

2022.10.25

useQuery 에서 반환되는 객체의 종류 ✔ 데이터가 아직 준비되지 않았을 때 데이터가 정의되지 않으면 오류가 나오게 하지 않고, 적절한 조치를 할 수 있습니다. 그 중 살펴볼 것은 isLoading 과 isError 입니다. 이 두가지는 데이터가 로딩 중인지 여부, 데이터를 가져올 때 오류가 있는지 여부를 알려주는 boolean 입니다. 저번에 만든 코드 const {data, isLoading, isError} = useQuery('posts', fetchPosts); 동일하게 반환 객체에서 isLoading 과 isError 를 추가 합니다. ✔ isLoadding // replace with useQuery const {data, isLoading, isError} = useQuery('post..

티스토리툴바