소개

SWR은 Next.js 팀에서 만든 데이터 훅 라이브러리로, 간단하게 데이터를 가져오고 캐싱하여 최신 상태를 유지할 수 있습니다. 이번 글에서는 SWR에서 주요한 기능인 revalidate와 mutate에 대해 알아보겠습니다. 이들은 데이터를 다시 가져오고 업데이트할 때 사용되며, 어떻게 사용하는지 자세히 살펴보겠습니다.

내용

revalidate

revalidate 함수는 SWR에서 데이터를 새로고침하는 역할을 합니다. 이 함수를 호출하면 SWR은 캐시된 데이터를 무시하고 새로운 데이터를 가져옵니다. 이는 주로 사용자의 요청에 응답하여 데이터를 새로 고치는 데 사용됩니다.

활용방법

1. SWR 훅에서 revalidate 함수를 가져옵니다.
2. 사용자의 요청에 따라 revalidate 함수를 호출하여 데이터를 새로 고칩니다.

const { data, revalidate } = useSWR('/api/data');
// 사용자의 요청에 응답하여 데이터를 다시 가져오기
const handleRefresh = () => {
  revalidate();
};

mutate

mutate 함수는 SWR에서 캐시된 데이터를 업데이트하고 재구성하는 역할을 합니다. 이 함수를 호출하면 현재 캐시된 데이터를 업데이트하며, 백그라운드에서 새로운 데이터를 가져오지 않습니다.

활용방법

1. SWR 훅에서 mutate 함수를 가져옵니다.
2. 새로운 데이터를 사용하여 mutate 함수를 호출하여 캐시된 데이터를 업데이트합니다.

const { data, mutate } = useSWR('/api/data');

// 데이터 업데이트
const handleUpdateData = async (newData) => {
  // 새로운 데이터를 서버에 업데이트
  await updateDataOnServer(newData);

  // 캐시된 데이터 업데이트
  mutate(newData, false); // 백그라운드에서 새로운 데이터를 가져오지 않도록 설정
};

결론

이번 글에서는 SWR에서 주요한 기능인 revalidate와 mutate에 대해 알아보았습니다. 이들을 활용하면 데이터를 효율적으로 관리하고 최신 상태를 유지할 수 있습니다.