React useSWR 에서 mutate란 무엇인가? (useSWR의 mutate로 리액트 상태 관리 최적화하기)

 

 

React 로 웹개발을 한다구요? 댓글 create 구현을 했는데 페이지는 방금 만든 댓글을 가져오지 않아 새로 고침을 해야만 새로운 데이터가 그려진다구요???
그렇다면 React useSWR 의 mutate 를 쓰는 방법을 알아봅시다.

 

React 애플리케이션을 개발할 때, 데이터 페칭과 상태 관리는 성능과 사용자 경험을 최적화하는 데 매우 중요합니다. 그렇기에 SWR은 React 개발자들 사이에서 현재도 필수 도구로 자리 잡고 있습니다. 이 글에서는 SWR에서 제공하는 mutate 함수가 무엇인지, 그리고 이 함수가 리액트 상태 관리에서 어떻게 최적화에 기여할 수 있는지에 대해 다루겠습니다.

SWR과 데이터 페칭의 중요성

SWR은 Stale-While-Revalidate의 약자로, 데이터를 가져오고 캐시하는 패턴을 구현하는 데 도움을 주는 라이브러리입니다. 이는 주로 Next.js 또는 React 프로젝트에서 서버로부터 데이터를 효율적으로 가져오고 관리하는 데 사용됩니다.

SWR의 가장 큰 장점은 자동 캐싱과 재검증(revalidation) 기능입니다. 이를 통해 서버와의 불필요한 요청을 줄이고, UI가 최신 상태를 유지할 수 있습니다. 하지만, 가끔 서버 응답을 기다리지 않고도 클라이언트 상태를 빠르게 업데이트해야 할 경우가 있는데, 바로 이때 mutate가 큰 역할을 합니다.

mutate란 무엇인가?

SWR의 mutate는 SWR 캐시에 있는 데이터를 수동으로 업데이트하는 함수입니다. 즉, 서버로부터 다시 데이터를 가져오지 않고도 캐시에 있는 데이터를 변경할 수 있게 해줍니다. 이 기능을 사용하면 서버의 응답을 기다리지 않고도 UI를 빠르게 업데이트할 수 있으며, 이후 서버의 실제 데이터를 받아와 자동으로 캐시와 동기화할 수 있습니다.

mutate 함수의 시그니처

mutate는 SWR 훅을 사용하면 반환되는 함수 중 하나입니다. 다음은 mutate의 기본 시그니처입니다:

mutate(key, data?, shouldRevalidate = true);

• key: SWR의 캐시를 식별하는 고유 키입니다. 일반적으로 페칭하고자 하는 API URL을 사용합니다.
• data: SWR 캐시에 업데이트할 새로운 데이터입니다. 이 매개변수를 생략하면, SWR이 자동으로 서버로부터 데이터를 다시 가져와 업데이트합니다.
• shouldRevalidate: 기본값이 true로 설정되어 있으며, 이 값이 true일 경우 서버로부터 최신 데이터를 다시 가져옵니다. false로 설정하면 주어진 데이터만 SWR 캐시에 반영하고, 서버 요청은 생략됩니다.

mutate의 사용 시나리오

1. 낙관적 업데이트 (Optimistic Update)

낙관적 업데이트는 서버 응답을 기다리지 않고 UI를 먼저 업데이트한 뒤, 서버 응답을 받아 상태를 동기화하는 방식입니다. 이 방식은 사용자 경험을 크게 향상시킵니다. 예를 들어, 댓글을 작성했을 때 서버 응답을 기다리지 않고 바로 UI에 반영하는 경우에 사용됩니다.

const { data: comments, mutate } = useSWR(`/posts/${postId}/comments`);

const addComment = async (newComment) => {
  // 캐시된 데이터를 먼저 업데이트 (낙관적 업데이트)
  mutate([...comments, newComment], false);

  // 서버에 실제로 댓글을 추가하는 요청
  await fetch(`/api/comments`, {
    method: 'POST',
    body: JSON.stringify(newComment),
  });

  // 서버에서 최신 데이터 다시 받아오기
  mutate();
};

이 예시에서, mutate([...comments, newComment], false)는 서버 응답 없이 로컬 상태를 즉시 업데이트하여 댓글을 추가하는 것처럼 보이게 합니다. 서버 요청이 완료된 후에 다시 mutate()를 호출하여 최신 데이터를 가져옵니다.

2. 캐시 강제 업데이트

때로는 서버에서 데이터를 강제로 다시 가져와야 할 때가 있습니다. 예를 들어, 어떤 데이터를 수동으로 변경하고 나서 이를 최신 상태로 동기화할 때 mutate()를 사용할 수 있습니다.

const { data: comments, mutate } = useSWR(`/posts/${postId}/comments`);

const refreshComments = async () => {
  // 서버에서 데이터를 강제로 다시 가져와 SWR 캐시를 최신 상태로 업데이트
  await mutate();
};

mutate()를 호출하면 서버에서 데이터를 강제로 다시 가져오고, 캐시를 최신 상태로 동기화합니다. 이를 통해 서버의 상태와 클라이언트의 캐시를 일관성 있게 유지할 수 있습니다.

mutate를 활용한 상태 관리 최적화

React 애플리케이션에서 mutate를 사용하면 서버와 클라이언트 간의 데이터 일관성을 유지하면서도, 사용자 경험을 크게 향상시킬 수 있습니다. 낙관적 업데이트를 통해 빠른 UI 응답을 제공하고, 캐시 데이터를 효율적으로 관리함으로써 불필요한 서버 요청을 줄일 수 있습니다.

또한, mutate는 서버 상태와의 동기화에 유연하게 대처할 수 있어 실시간 데이터를 처리하는 애플리케이션에서 특히 유용합니다. 사용자 액션에 즉각적으로 반응하는 인터랙티브한 UI를 만들 때, mutate를 활용하면 성능과 사용자 경험 모두를 최적화할 수 있습니다.

결론

useSWR에서 제공하는 mutate 함수는 캐시 데이터를 수동으로 변경하거나 업데이트할 수 있는 강력한 도구입니다. 이를 통해 클라이언트와 서버 간의 상태를 동기화하고, 즉각적인 UI 업데이트가 필요한 상황에서 매우 유용하게 사용할 수 있습니다. React 애플리케이션에서 데이터 페칭과 상태 관리를 최적화하고 싶다면, mutate를 적절히 활용하여 더 나은 사용자 경험을 제공해보세요.