SWR을 이용한 Optimistic UI

Kimrotti,•javascriptSWROptimistic UI
Back

사용자 경험을 개선하는 것은 PO, 디자이너만의 역할이 아니다. 개발자도 사용자 경험을 개선하는데 예민하게 반응해야 한다. 이번 글에서는 SWR을 이용한 Optimistic UI에 대해 알아보자.

Optimistic UI (낙관적 UI)

우리는 흔히 이하의 과정으로 UI를 업데이트 한다.

  1. 유저의 Action
  2. 버튼 비활성화 OR 로딩 스피너 표시
  3. 서버로 요청
  4. 서버로부터 응답 받음
  5. 응답에 따른 UI 업데이트

이 과정은 사용자에게 불편함을 주기 마련이다. 사용자는 버튼을 누르고 나서 결과를 기다리는 것을 좋아하지 않는다. 이때, Optimistic UI를 사용하면 사용자 경험을 개선할 수 있다.

Optimistic Update

  1. 유저의 Action
  2. 예상 결과를 UI에 업데이트
  3. 서버로 요청
  4. 서버로부터 응답 받음
  5. 실패시, UI를 원래대로 복구

Optimistic Update는 사용자가 Action을 취한 후, 서버로 요청을 보내기 전에 예상 결과를 UI에 업데이트하는 방식이다. 이를 통해 사용자는 Action을 취한 후, 결과를 기다리는 시간을 줄일 수 있다.

SWR을 활용한 Optimistic UI

인스타그램을 이용하면서 와이파이와 데이터를 끄면 어떻게 될지 궁금해서 전부 다 끈 후 켜본적이 있다. 재밌게도 좋아요와 같은 기능이 정상적으로 작동하였지만 와이파이가 연결되면 해당 좋아요가 실제 반영된다는 안내문구가 있어 흥미로웠던 기억이 있다. 팀 내에서 기획전의 커뮤니티 개발을 담당하며 인스타그램의 사례를 적용해보고자 하였다. 과거 개발한 커뮤니티의 댓글 작성, 좋아요 기능을 SWR을 활용한 Optimistic UI로 개선하며, 좋아요를 누르면 화면이 새로고침되고 깜빡거렸던 기존의 방식을 조금 더 매끄러운 방식으로 변경하였다.

import useSWR from 'swr';
 
import { getLikes, updateLike } from "./api";
 
const LikeButton = ({ postId }) => {
  const { data, error , mutate } = useSWR(`/api/posts/${postId}/likes`, getLikes);
 
  const handleLike = async () => {
    const newLike = data.likes + 1;
 
    try {
          await mutate(updateLike(newLike), {
                optimisticData: [...data, newLike],
                rollbackOnError: true,
                populateCache: true,
                revalidate: false
              });
          console.log("좋아요 추가 성공");
    } catch (e) {
          console.error("좋아요 추가 실패");
    }};
 
  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
 
  return (
    <button onClick={handleLike}>
      {data.likes } ❤️
    </button>
  );
};

위 코드는 SWR을 활용한 Optimistic UI의 예시이다. useSWR을 통해 좋아요 수를 가져오고, handleLike 함수를 통해 좋아요를 추가한다. mutate 함수를 통해 좋아요를 추가하고, optimisticData를 통해 예상 결과를 UI에 업데이트한다. rollbackOnError을 통해 실패시, UI를 원래대로 복구한다.

마치며

SWR을 활용한 Optimistic UI를 통해 사용자 경험을 개선할 수 있다. 사용자는 Action을 취한 후, 결과를 기다리는 시간을 줄일 수 있고, 더 나은 사용자 경험을 제공할 수 있다. 브라우저 네트워크 throttling을 통해 오프라인 상태를 시뮬레이션하고, Optimistic UI를 테스트해보자.