[Next.js] Optimustic Update UI with useSwr

 

좋아요와 기능을 코딩할때, 3가지 코드의 예를 들어 useSwr을 활용한 mutate(업데이트) 기능을 설명하려고한다 

이번 게시이후 useSwr과 react-query(tanstack) 을 비교해볼예정이다. 

 

 

먼저 SWR에 대해서 간략하게 설명을 하자면,

SWR은 데이터를 가져오고 캐싱하여 React 애플리케이션에서 사용하기 쉽도록 도와주는 라이브러리다.

 

그럼 코드를 살펴보자.

 

const { mutate } = useSWRConfig();

  const { data, mutate: boundMutate } = useSWR<ItemDetailResponse>(
    typeof window === undefined
      ? null
      : router.query.id
      ? `/api/products/${router.query.id}`
      : null
  );

 

우리는 useSWRConfig를 사용한 unbound mutate와 , 그냥 useSWR을 사용한 bound mutate를 살펴보도록 할 것이다.

알단 unbound 와 bound의 차이점을 말하자면, 어느 컴포넌트에서 사용하든, unbound는 얽매이지 않는다는 것이다.  (유연성)

 

    // 1. bound mutation
    boundMutate((prev) => prev && { ...prev, isLiked: !prev.isLiked }, false);

    // 2.  unbound mutation
    mutate({ ...data, product: { ...data?.product, name: "0hyeon" } }, false);

    // 3.  unbound mutation
    mutate("/api/users/me", (prev: any) => ({ ok: !prev.ok }), false);

 

 

 

boundMutate는 특정 데이터에 대한 조작을 명시적으로 처리하는 반면, mutate는 다양한 데이터 조작 및 외부 요청을 처리할 수 있는 유연성을 제공한다. 선택은 작업의 목적과 특정 상황에 따라 달라질 수 있고, 명확한 대상 데이터가 있고 해당 데이터에만 작업을 수행해야 할 때에는 boundMutate를 사용하는 것이 좋을 수 있겠다. 그러나 다양한 데이터 조작이 필요하거나 외부 요청을 처리해야 할 때에는 mutate를 사용하는 것이 더 적합하다.