SWR이란?

stale-while-revalidate라는 전략에서 따온 것으로, HTTP 요청 데이터를 최신 상태로 유지하는 방법이다.
간단히 말해, 먼저 캐시된 데이터를 화면에 보여준 다음, 백그라운드에서 새 데이터를 가져와 업데이트하는 방식이다.

SWR을 사용하면 컴포넌트가 자동으로 최신 데이터를 받아와 화면을 계속 업데이트할 수 있다. 덕분에 사용자에게 빠르고 반응적인 UI를 제공하게 된다. 초보자도 쉽게 사용할 수 있도록 설계된 데이터

사용방법

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

위 코드는 SWR를 사용하는 기본예제로, 간단히 말해 API에서 데이터를 가져와 화면에 보여주는 방법이다.
1. useSWR 훅이 하는 일 :

• useSWR은 특정 데이터를 가져오고 관리하는 도구이다.
• 여기서 /api/user라는 데이터를 가져오고 그 데이터를 화면에 보여주는 역할을 한다.

2.코드 주요 부분:

• key:/api/user는 데이터의 고유ID로, 어떤 데이터를 가져올지 정한다. 보통 API URL을 사용한다.
• fetcher:데이터를 가져오는 함수이다. 예를 들어, fetch 또는 Axios를 사용할 수 있다.

3.useSWR이 반환하는 값

• data: 가져온 데이터. 요청이 성공하면 여기에 데이터가 들어간다.
  -isLoadin: 데이터를 가져오는 중이라면 true가 되고, 이를 이용해 '로딩 중' 메시지를 보여줄 수 있다.
  -error: 요청이 실패하면 에러 정보를 담고 있다. 이를 이용해 에러 메시지를 보여줄 수 있다.

정리

쉽게 비유하자면, useSWR은 주문한 음식을 가져다 주는 서버라고 생각하면 된다.
주문번호(key)를 주면서 주방(fetcher)에서 음식을 가져오고, 가져오는 동안 '기다려주세요' 메시지(isLodading)를 보여준다.
만약 문제가 생기면 '문제가 발생했어요'(error)를 알려주고, 성공하면 맛있는 음식을 (data)를 내 놓는 것이다.