[React] useSWR의 mutate 사용해보기.

개요

최근 Next.js 강의를 학습하면서 클론 챌린지로 미니 SNS 프로젝트를 진행하게 되었다. 챌린지를 진행 하면서 swr 라이브러리의 useSWR 훅의 mutate 기능을 이용해 미니 SNS의 좋아요 기능을 구현하였는데, 이를 구현하면서 얻은 지식을 정리해보려고 한다.

useSWR
Vercel에서 제공하는 데이터 가져오기 및 상태 관리 Hook으로 swr이라는 이름은 HTTP 캐시 무효 전략인 Stale-While-Revalidate에서 유래되었다.
swr에 대한 자세한 내용은 공식 문서 참고.

HTTP 캐시 무효 전략
캐시(Stale)로부터 데이터를 반환한 후, 사용자의 반응(While)에 따라 서버에 재검증 요청(Revalidate)을 보내 최신화된 데이터를 가져오는 전략.

간단하게 설명하자면 캐시된 데이터를 활용하여 항상 최신 데이터를 유지할 수 있게 되는 훅이라 볼 수 있겠다.

Mutation 기능

캐싱된 데이터를 가져오기 때문에 반응형 UI에서 사용자에게 즉각적인 피드백을 주기가 힘들다. 이를 해결하기 위해서는 mutate를 사용할 수 있는데, mutate는 주로 두가지 방식으로 사용된다.

1. bound Mutate

bound Mutate는 useSWR 훅과 함께 사용되는 함수로 변경한 데이터를 갱신하고 필요에 따라 options 값을 전달하여 재검증(revalidate) 여부를 설정 할 수 있다.

options의 기본 값은 true이며, false를 주게 되면 재검증 과정을 생략할 수 있다.
더 자세한 내용은 공식 문서의 API 항목 참고.

import type { NextPage } from "next";
import useSWR from 'swr'


interface Response{
	//...data type
}
 
function Component(): NextPage {

const { data, mutate } = useSWR<Response>('https://example.com/api/data');

  const handleRevalid = async () => {
	//mutate(data, options)
    mutate((prev => prev && {...prev, isLiked: !prev.isLiked}), false);
  };
	//...code
}

2. global Mutate

반면에 global Mutate는 useSWR 훅과는 별개로 독립적으로 사용할 수 있으며, 특정 데이터를 갱신하고 싶을 때 직접 사용이 가능하다. useSWRConfig 훅을 사용하거나 전역으로 가져와서 사용한다.

useSWR은 API 엔드포인트를 키값으로 가지고 있기 때문에, mutate로 데이터를 갱신하기 위해서는 변경이 필요한 API 엔드포인트가 키 값으로 주어져야 한다.

⚠️ 독립적으로 사용되기에 해당 키에 대한 캐시를 업데이트하거나 재검증 트리거를 하지 않는다.

이는 동일한 키를 가진 다른 컴포넌트에서 사용중인 useSWR 훅에 영향을 미치지 않음을 의미한다.

아래의 코드는 useSWRConfig 훅을 가져와서 사용한 코드이다.

import type { NextPage } from "next";
import useSWR, { useSWRConfig } from 'swr'


interface Response{
	//...data type
}
 
function Component(): NextPage {

const { data, mutate } = useSWR<Response>('https://example.com/api/data');
const {mutate:globalMutate} = useSWRConfig();

  const handleRevalid = async () => {
	//mutate(key, data, options)
	globalMutate('http://example/com/api/user', (prev: any) => !prev.ok, false);
	//...code
}

결론

상호작용이 필요한 경우 bound mutate
상호작용이 필요없는 경우 global mutate
물론 언제나 예외는 존재하기 때문에 프로젝트의 요구사항에 따라 적절한 방식을 선택하는 것이 중요하다고 생각한다.

참고자료

1. SWR
2. Next.js 강의