swr

: SWR은 vercel에서 제작한, 데이터를 가져오기 위한 모듈이다. Next.js에서 유독 많이 보이는 개념이라, 정리하고자 한다. 아마도 swr이 서버 사이드 랜더링도 되기 때문인 것 같다. 사용 import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return failed to load if (isLoading) return loading... return hello {data.name}! } key : 일반적으로 API URL을 말한다. fetcher : key값을 이용해 데이터를 가져오는 함수이다. fetch 혹은 axios를 이용해..

글을 쓰다가 글의 길이 길어져 활용하는 부분은 다른 페이지로 만들어 작성하고자 한다. SWR 활용하기 우선은 파일을 새로 만든다. 아래의 코드를 작성하여 새로운 react 파일을 만든다. npx crate-react-app {생성하고자 하는 파일 이름} 폴더 셋팅 위와 같이 폴더를 셋팅하였다. pages/Main.js import React from "react"; const Main = () => { return Main; }; export default Main; pages/Detail.js import React from "react"; const **Detail** = () => { return **Detail**; }; export default **Detail**; pages/index.js ..

개념 SWR은 vercel에서 제작한 모듈이며, 데이터를 가져올 때 쓰인다. vercel의 SWR 공식문서 "SWR"이라는 이름은 HTTP RFC 5861(opens in a new tab)에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.그리고 UI는 항상 빠르고 반응적입니다. 장점 단 한 줄의 코드로 프로젝트 내의 데이터 가져오기 로직을 단순화할 수 있다. 빠르고, 가볍고, 재사용 가능한 데이터 가져오기 내장된 캐시 및 요청 ..