왕가's history

일반적인 pagenation은 간단히 설명하고, useSWRInfinite에 대해 소개하고자 합니다. https://swr.vercel.app/ko/docs/pagination Pagination 기본 pagination은 useSWRInfinite를 필요로 하지 않습니다. function Page ({ index }) { const { data } = useSWR(`/api/data?page=${index}`, fetcher); // ... 로딩 및 에러 상태를 처리 return data.map(item => {item.name}) } function App () { const [pageIndex, setPageIndex] = useState(0); return setPageIndex(pageIndex..

Mutate mutate는 원격 데이터 및 캐싱된 값을 변경, 갱신하기 위해 사용됩니다. 다른 곳에서 해당하는 키값에 데이터를 post나 delete, patch 등 작업이 일어났을 경우, 캐싱된 데이터를 갱신해야 될 때 사용된다고 보면 됩니다. (revalidation) Global과 Bound 두 가지로 나눠져 있습니다. Global Mutate useSWRConfig 또는 swr을 import 해서 사용하게 됩니다. import { useSWRConfig } from "swr" function App() { const { mutate } = useSWRConfig() mutate(key, data, options) } /////////////////////////////////////// impor..

2023.07.03 - [Front-End/Library] - Library] SWR 저번 게시글에 이어서 SWR 여러 개념? 기능? 들을 설명하려고 합니다. 전역설정 만약 SWR을 사용하는데 fetcher가 중복된다면 고려해서 사용하면 좋을 듯한 기능입니다. import useSWR, { SWRConfig } from 'swr' function Dashboard () { const { data: events } = useSWR('/api/events') const { data: projects } = useSWR('/api/projects') const { data: user } = useSWR('/api/user', { refreshInterval: 0 }) // 오버라이드 // ... } funct..

SWR(Stale-While-Revalidate) swr은 데이터를 가져오기 위한 React hook 라이브러리로 보시면 됩니다. 서버에 GET요청을 하고, 결과를 받아와 간편하게 사용할 수 있습니다. 단순히 axios만 사용하는 것보다 효율이 좋다고 보시면 됩니다. 대표적인 특징으로 빠르고, 가볍고, 재사용이 가능한 데이터를 가져온다. 내장된 캐시 및 요청 중복을 제거 실시간으로 동작 3가지를 볼 수 있을 듯합니다. (저는 캐시 데이터를 사용하고, 중복으로 요청을 안 한다는 게 큰 장점으로 생각합니다.) 공식 홈페이지는 아래와 같습니다. https://swr.vercel.app/ko 설치 npm i swr yarn add swr 기본 구성 const { data, error, isLoading, isV..