Optimistic UI Update With useSWR

오늘 Nomard Coder를 통해서 학습한 내용 중 Optimistic UI Update에 대해서 알게 되었다.

 

Optimistic UI Update란?

예를 들어 백엔드에 Post 요청을 보내고 업데이트된 데이터를 통해 다시 보이는 화면을 업데이트해주고 싶을 때

지금까지는 다시 Get 요청을 보내서 전달 받은 데이터를 화면에 업데이트해 주는 경우가 많으셨을 겁니다.

 

이때 Post요청을 보내고 즉각적으로 화면에 데이터가 변환된 것처럼? 보여주고 싶을 때 사용하는 것이 바로 Optimistic UI Update입니다.

 

Optimistic UI Update를 구현하는 방법은 저는 useSWR의 mutate기능을 통해서 구현했습니다.

 

  const { data, mutate } = useSWR<ItemDetailResponse>(
    router.query.id ? `/api/products/${router.query.id}` : null
  );
  
  const onFavClick = () => { // 좋아요 기능
    toggleFav({}); // 좋아요 백엔드 요청
    if (!data) return;
    mutate({ ...data, isLiked: !data.isLiked }, false); // mutate를 통해 전달 받아질 예상 데이터를 전달 한다고 생각하시면 됩니다.
  };

 

 

추가적으로 mutate에 인자 중 첫 번째 인자는 전달받아질 예상 데이터이고, 두 번째 boolean값은 데이터를 다시 Get 할 것인지 여부를 결정할 수 있습니다.

 

노마드 코더 - 캐럿마켓

 

회사에서는 React-Query를 사용하고 있는데 useSWR 또한 정말 유용한 것 같습니다.