[SWR] revalidate가 없어진 지금 어떻게 데이터를 갱신하는가?

안녕하세요.

redux의 시대가 끝났으면 좋겠습니다.

 

이번 sleact에서는 redux 대신 swr을 사용하는데요.

강의 기준일이 작년 초 정도여서 여러 라이브러리가 많이 바뀌었더라구요...홍홍

 

import React from 'react';
import useSWR from 'swr';
import axios from "axios";

const LogIn = () => {
//옛날엔 이런 꼴이었는데요.
	// const { data, error, revalidate, mutate } = useSWR<YOURTYPE>("YOUR_API_ADDRESS", fetcher);
    //요즘엔 이렇게 씁니다.
    const { data, error, isValidating, mutate } = useSWR<YOURTYPE>("YOUR_API_ADDRESS", fetcher);
	return (
    	<div>로그인!</div>
    );
}

export default LogIn;

 

원하는 address에 GET 요청을 한 결과물을 담아뒀던 revalidate() 함수가 사라지고,

isValidating (boolean)이 생겼습니다.

용도는 요청이 있을 때 지금 로딩중이나 요청중인지 확인하는 boolean 이라고 하네요.

Spinner와 연계시키는 목적인가 봅니다.

 

1. 원래 revalidate()는 무슨 용도로 썼나요?

 

가령, 로그인할때 (POST 요청) 이런 값을 data에 담아준다고 합시다.

data: {
userID: 1,
    name: "russel",
    position: "Developer",
    type: "junior",
    projects: [],
}

 

일반적으로 이런 response를 쿠키로 만들어서 브라우저에 저장해두고 사용하곤 합니다.

다만, 여기 있는 projects 이 친구를 사용자가 직접 선택하는 부류라고 한다면 어떻게 할까요? 로그인을 한 뒤에 자기와 연관되어있는 프로젝트를 선택하는 형식으로요.

 

어찌저찌 성공적으로 POST요청을 보낸다면 문제가 발생합니다. 로그인 시 response로 쿠키를 형성해두었는데,

이게 최신으로 갱신되지 않았다는 점이에요. 이런 문제가 있을 때 swr을 전역저장소 처럼 사용해 data를 fetching 해준다면 쉽게 해결할 수 있습니다. 과거엔 그걸 해결해주는 함수가 revalidate() 였구요.

 

2. 그럼 이제 어떻게 해주나요?

 

mutate를 이용해주면 됩니다.

여기에서 사용하는 mutate는 로컬에서 있는, 그러니까 useSWR에 있는 mutate를 말합니다.

(전역의 경우, 그러니까 useSWRConfig에 있는 mutate는 key로 api 주소를 따로 세팅해줘야합니다.)

 

예를 들어 우리가 projects를 올바르게 POST해서 이런 return이 왔다고 합시다.

//...
const { data, error, mutate } = useSWR("YOUR_API_KEY", fetcher);

axios.post("YOUR_API_KEY", {
	id: 1,
    projectName: "sleact",
    description: "this is a powerful devOps app for group."
}).then((res) => {
	// 편의상 보낸 data를 그대로 res.data에 담아줬다고 합시다!
    mutate(...data, projectName: res.data);
})

//...

 

이렇게 갱신해주면 우리의 전역저장소 swr의 data에는 업데이트가 잘되게 됩니다.

여기에서 우리는 mutate의 두 번째 인자를 적절하게 조정함으로써

1) 서버에서 다시 GET요청을 받을것인가?
2) 아니면 일단 보내지 않고 그대로 반영할 것인가?

를 결정합니다.

 

만약 두 번째 인자(shouldRevalidate?)를 비우거나, 혹은 true로 설정을 해준다면,

POST 요청이외에도 우리의 API 주소에서부터 새로 GET요청을 받아와 정보를 갱신하는 걸 확인할 수 있습니다.

 

이건 최신 정보임을 보장하지만, 때로는 서버에 꽤 과부하를 줄 수 있습니다.

인스타그램의 좋아요 기능을 생각해본다면, 좋아요 수를 인터렉션때마다 새로 받아오는게 비효율적일 수 있습니다.

또, 누를 때 바로 반영되는게 아니라 POST 요청 그리고 GET 요청의 시간만큼 약간의 딜레이가 있겠죠.

 

이럴때 두번째 인자를 false해주면 쉽게 해결할 수 있습니다.

 

약간의 팁이 있다면 login 성공시엔 true로 해줍시다.

화면이 넘어간 다음 쿠키가 최신화되어있지 않아서 오류가 있을 수 있습니다.

 

그럼 이만! 즐거운 개발 합시당