설치
$ npm install swr
기초 API
fetch해오는 데이터를 사용하는 hook은 다음과 같이 정의할 수 있다. return 하는 값은 모두 가져올 필요는 없고, 상황에 따라 개발자가 필요한 값만 가져와 사용하면 된다.
const { data, error, isValidating, mutate } = useSWR(key, fetcher, options);
-
key
요청을 위한 고유한 키이다. 주로 요청하는 url을 key로 지정한다. (문자열 또는 함수, 배열, null) -
fetcher
데이터를 가져오기 위한 함수를 반환하는 Promise이다. -
options
SWR hook 을 위한 옵션 객체이며 생략 가능하다. -
data
fetcher가 이행한 주어진 키의 데이터이다. -
error
fetcher가 던진 에러 (또는undefined), 또한 데이터와 에러는 동시에 존재할 수 있다. 데이터가 있는 경우에도 특정한 상황에서 에러를 던지고 싶은 로직을 작성할 상황이 있기 때문이다. -
isValidatin
요청이나 갱신 로딩의 여부이다. -
isLoading
진행 중인 요청이 있고 "로드된 데이터"가 없는 상태이다. 폴백 데이터와 이전 데이터는 "로드된 데이터"로 간주하지 않는다. -
mutate(data?, options?)
캐시 된 데이터를 뮤테이트하기 위한 함수. key로 저장된 fetcher를 다시 실행시켜준다.
사용
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>
}error가 발생 시, loading 상황시, 이외에 data가 올바르게 응답을 받았을 시 모두 상황에 맞는 UI 업데이트를 진행할 수 있는 컴포넌트이다.
이 예시에서, useSWR hook은 문자열key와 fetcher 함수를 받는다. key는 데이터의 고유한 식별자이며(일반적으로 API URL 로 지정) fetcher로 전달될 것이다.
fetcher는 데이터를 반환하는 어떠한 비동기 함수가 온다. fetch, axios와 같은 도구를 사용할 수 있다. hook은 세개의 값을 반환한다. 요청 상태에 기반한 data와 error, loading 상태 여부가 온다.
응용
해당 유저의 id정보를 인자로 활용하는 custom hook을 만들 수도 있다.
useUser.ts 파일을 만들고, 필요한 인자를 생성한뒤 data, isLoading, error 등 필요한 정보를 객체형태로 return하면 된다.
const useUser = (id: string) => {
const { data, isLoading, error } = useSWR(`/api/user/${id}`, fetcher);
return {
data,
isLoading,
error
};
};
export default useUser;또한 swr은 이러한 custom hook을 같이 호출하면 (호출하는 swr의 key가 같다면)
여러번 하지 않고 한번만 한다. 응답값을 캐시에 저장하고, 다른 호출하는 api는 이 캐시를 사용하는 효율적인 형식이다.
