SWR이란

데이터를 가져오기 위한 React hook 라이브러리이다. SWR은 원격 데이터를 가져올 때 캐싱된 데이터가 있으면 그 데이터를 먼저 반환한 다음 가져오기 요청을 보내고, 마지막으로 최신 데이터와 함께 제공하는 라이브러리다.

SWR의 특징 및 장점

• Lightweight
• Realtime
• Susoense
• Pagination
• Backend Agnostic
• SSR / SSG Ready
• TypeScript Ready
• Remote + Local

사용법

import useSWR from 'swr'

function Profile() {
	const { data, error } = useSWR('/api/user/123',fetcher)
    
    if(error) return <div>failed to load</div>
    if(!data) return <div>loading....</div>
    
    return <div>hello {data.name}!</div>
 }

useSWR로 React Hook으로, 주된 인자로 key와 fetcher가 있다. 첫번쨰 인자는 API URL이면서 캐싱할 때 사용되는 key가 됩니다.이는 useSWR("/api/user/123',fetcher)를 여러 컴포넌트에서 사용햐여도 같은 key의 데이터가 있다면 캐싱된 것을 가져오는 것입니다.
두번째 인자는 fetcher이다.Fetch API를 기본으로 하며,제일 많이 사용되는 Axios나 GraphQL을 사용할 수 있습니다

const fetcher = (url:string) => axios.get(url).then((res) => res.data);
const {data: users, error, isLoading } = useSWR('/api/chat',fetcher,{
	refreshInterval:1000
 });
 
const currentUserWIthMessage = users?.find(
	(user: UserWithChat) => user.email === currentUser?.email
 };
 if(isLoading) return <p>Loading...</p>;
 if(error) return <p>Error!</p>;