낙관적 업데이트에 관하여 설명해주세요

ChoiYongHyeun·2024년 12월 12일

browser

브라우저

목록 보기

12/16

낙관적 업데이트란 ?

낙관적 업데이트란 클라이언트와 서버 단의 인터렉션에서

클라이언트의 상태 변경을 인터렉션 성공 유무에 상관 없이 성공 할 것이라 낙관적으로 생각하고 업데이트 하는 것을 의미한다.

즉, 클라이언트의 상태 변경을 서버의 응답값이 아닌 클라이언트 단에서 일어난 액션을 중심으로 하는 행위를 의미한다.

낙관적 업데이트가 왜 필요할까 ?

이런 낙관적 업데이트를 사용하는 이유는 단 한가지이다.

바로 클라이언트 단에서의 더 빠른 상태 변경을 통해 유저 경험을 향상시키고자 하는 것이다.

서버와 클라이언트 간의 통신에서는 다양한 변수가 존재한다.

이에 클라이언트의 상태 변경이 통신의 응답값에 영향을 받게 된다면 네트워크 요청이 길어 질 수록 화면의 상태가 변경되는데까지 걸리는 시간은 오래 걸릴 수 밖에 없다.

네트워크 요청의 성공 유무가 크게 중요하지 않고 성공 할 확률이 매우 높은 요청임에도 불구하고 모든 요청의 결과를 기다리는 것은 자칫하면 매우 답답하게 느껴질 수 있다.

생각해보자

결제를 할 때 결제가 완료 될 때 까지 로딩 스피너가 돌아가는 것은 참을 수 있다.

하지만 단순히 좋아요를 누를 때 마다 로딩 스피너가 돌아가는 것은 답답해서 참을 수가 없을 것이다. (적어도 나는 그렇다.)

낙관적 업데이트의 예시

가장 흔하게 낙관적 업데이트가 사용되는 영역은 아마 좋아요나 추천 등과 같이 인터렉션의 성공 유무가 크게 중요하지 않으면서

요청 후 클라이언트 단에서 상태가 변경 되어야 하는 부분들일 것이다.

낙관적 업데이트를 구현하는 방식은 매우 다양하다.

리액트 쿼리에서는 두 가지 방법을 제시[1] 하는데 그 중 내가 사용했던 방법을 예시로 들고자 한다.

const MarkingItemLikeToggle = () => {
  const { markingId, countData, isLiked } = useMarkingItemProps(); // 실제 서버로부터 받은 데이터
  const [_isLiked, _setIsLiked] = useState<boolean>(() => isLiked); // 낙관적 업데이트에 이용 할 가상의 상태 
  const [_likedCount, _setLikedCount] = useState<number>(
    () => countData.likedCount,
  );

  const { mutate: postLikeMarking, isPending: isPostLikeMarkingPending } =
    usePostLikeMarking();
  
... 


  const handleClickLikeButton = () => {
    // 낙관적 업데이트 적용 
    _setIsLiked(true);
    _setLikedCount((prev) => prev + 1);

    postLikeMarking(
      { markingId },
      {
        onError: () => {
          // 요청 실패 시 낙관적 업데이트 취소
          _setIsLiked(false);
          _setLikedCount((prev) => prev - 1);
        },
      },
    );
  };
  
  return (
  ...
        {_isLiked ? (
        <button
          aria-label={`${markingId} 번 마킹 좋아요 취소`}
          onClick={handleClickUnLikeButton}
          disabled={isPending}
          className="text-tangerine-500"
        >
          <FilledLikeIcon />
        </button>
      ) : (
        <button
          aria-label={`${markingId} 번 마킹 좋아요 추가`}
          onClick={handleClickLikeButton}
          disabled={isPending}
        >
          <LikeIcon />
        </button>
      )}
...
  )