[TIL] SWR를 사용하여 데이터를 가져와보자.

SWR : 데이터 가져오기를 위한 React Hooks

"SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었다.
SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다.

SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.
그리고 UI는 항상 빠르고 반응적입니다.

---

단 한 줄의 코드로 프로젝트 내의 데이터 가져오기 로직을 단순화할 수 있으며,
다음과 같은 모든 놀라운 기능들을 바로 사용할 수도 있습니다.

• 빠르고, 가볍고, 재사용 가능한 데이터 가져오기
• 내장된 캐시 및 요청 중복 제거
• 실시간 경험
• 전송 및 프로토콜에 구애받지 않음
• SSR / ISR / SSG support
• TypeScript 준비
• React Native

---

SWR은 더 나은 경험을 구축할 수 있도록 속도, 정확성, 안정성의 모든 측면을 다룹니다.

• 빠른 페이지 내비게이션
• 인터벌 폴링
• 데이터 의존성
• 포커스시 재검증
• 네트워크 회복 시 재검증
• 로컬 뮤테이션(Optimistic UI)
• 스마트한 에러 재시도
• 페이지 및 스크롤 위치 복구
• React Suspense

---

SWR를 설치해보자

yarn arr swr

npm install swr

---

SWR를 살펴보자

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

• 이 예시에서, useSWR hook은 key 문자열과 fetcher 함수를 받는다.
• key는 데이터의 고유한 식별자이며(일반적으로 API URL) fetcher로 전달된다.
• fetcher는 데이터를 반환하는 어떠한 비동기 함수도 될 수 있다.
• 네이티브 fetch 또는 Axios와 같은 도구를 사용할 수 있다.
• hook은 두 개의 값을 반환합니다: 요청의 상태에 기반한 data와 error.

---

SWR를 사용해보자

import { useEffect, useState } from "react";
import axios from "axios";

const [docs, setDocs] = useState([]);

useEffect(() => {
	async function fetch() {
		const result = await axios.get(
			"https://jsonplaceholder.typicode.com/posts",
		);
        
		console.log(result.data);
		return result.data;
	}
	fetch().then((res) => {
		setDocs(res);
	});
}, []);

위의 코드는 8월 3일에 axios를 공부하며 사용했던 코드에 url만 추가했다.

현재 코드를 실행시키면, 콘솔 창에 데이터들을 잘 가져오는 것을 볼 수 있음.

• swr을 사용하기 위해 알맞은 api url, 데이터를 반환하는 비동기 함수를 생성한다.
  현재 jsonplaceholder의 url을 사용하기에 임의의 key를 넣어줬다.

const { data, error } = useSWR("/posts", fetcher);

• 데이터를 반환하는 비동기 함수는 달라질 것이 없고, 똑같이 작성해주면 된다.

async function fetcher() {
		const result = await axios.get(
			"https://jsonplaceholder.typicode.com/posts"
		);
        console.log(result.data);
		return result.data;
	}

• useEffect hook, useState hook 부분을 모두 주석 처리한다.
• 이렇게 해주고, 실행시키면 console창에 데이터가 잘 불러와지는 것을 볼 수 있다.

• 잘 받아온 데이터를 뿌려주기 위해 map을 돌린다.

받아온 데이터는 useState를 사용하지 않아도 data라는 이름으로 받아올 수 있고, data가 아니라 다른 변수로 변경하고 싶다면 아래와 같이 변경할 수 있다.

const { data: docs, error } = useSWR("/posts", fetcher);

• data가 없을 경우에는 loading을 보여주고, error가 났을 경우에는 error component를 보여주면 됨.

모두 작성하고, 다시 실행시키면

위와 같이 제대로 잘 작동하는 것을 볼 수 있다!

---

swr를 사용할 경우 useEffect와 useState를 사용하지 않고도 빠르고 가볍게 데이터를 가져올 수 있다.
또한, 해당 코드를 재사용하고 싶을 경우에는 아래와 같이 변경하면 된다!

---

swr를 처음 접해서, 아직은 조금 어색하지만 몇 번 사용하다 보면 익숙해질 것 같다.
아직은 기본 데이터를 불러오고, 배포를 한 것도 아니라서 성능적인 부분은 잘 모르겠지만
기존 useEffect, useState hook으로 사용했던 방법보다 훨씬 구현하기 쉽고, 간결한 코드라서 마음에 든다.
조만간 react-query를 사용해보고 swr와 비교해보아야겠다.

---

https://swr.vercel.app/ko

데이터 가져오기를 위한 React Hooks – SWR

[출처 및 참고 : 제로베이스 React 이론]