[Next.js] 좋아요 Optimistic Updates를 통해 UX 개선하기

 

 

📌 사용자 경험(UX) 을 개선하자

사용자 경험을 개선하는 것은 프론트엔드 개발자의 숙명이다. 현재 개발중인 SNS 프로젝트의 경우, 각 피드들을 확인하면서 원하는 게시글에 버튼을 클릭해 좋아요 표시를 할 수 있다.

 

그러던 와중 좋아요 버튼을 클릭했을 때, 업데이트되는 시간이 오래 걸린다는 문제가 있었다. 인스타그램과 같은 SNS에서는 즉각적으로 반영되는 것을 볼 수 있기 때문에 나도 이 부분에 대한 기능을 개선해보려고 한다.

 

 

 

 

📌 Optimistic Updates

Optimistic Updates는 낙관적 업데이트로 서버에 요청을 보내고 응답을 기다리지 않고 '미리 성공함'을 가정하여 UI를 즉시 갱신하는 것이다. 만일 서버 요청이 실패하면 롤백된다.

 

낙관적 업데이트의 장점은 '사용자 경험 개선' 이다. UI가 즉시 업데이트 되지 않는다면 사용자가 여러번 호출할 수도 있고 서비스에 이상함을 느낄 수 있기 때문에 이러한 부분을 해소할 수 있다는 장점이 있다.

 

나는 기존에 Tanstack Query 를 이용해서 데이터를 업데이트 처리하는 호직을 구현했었기 때문에 Tanstack Query 를 이용하여 Optimistic Updates를 구현하였다.

 

동작과정은 다음과 같다.

Optimistic Updates 동작과정 구현하기

1. 좋아요 버튼 클릭
2. UI 우선 업데이트
3. API 요청 반영
4. 에러 발생 시, 에러에 대한 UI 노출 후 변경사항 롤백

 

 

 

📌 구현

useMutation 을 이용한 Optimistic Updates

 

1. onMutate

• mutate가 호출될 때 호출되는 함수
• 이 때, UI를 미리 업데이트 한다.
• 동작과정은 코드 블럭에 주석 순서를 따라갑니다.

useMutation({
    mutationFn: doLike,
    onMutate: async (value) => {
    	// 1. 진행중인 리패치 취소 처리하여 지금 낙관적업데이트를 덮어쓰지 않도록 한다.
        await queryClient.cancelQueries({ queryKey: ['likes'] })
        
        // 2. 이전 상태 스냅샷을 찍는다.
        const previousLikes = queryClient.getQueryData(['likes'])
        
        // 3. 쿼리데이터 업데이트
        queryClient.setQueryData(['likes'], (old) => [...old, value])
        
        // 4. context 객체에 이전 스냅샷 값 적용
        return { previousLikes }
    }
});

2. onSettled

• 성공과 실패 이후 모두 호출되는 함수

onSettled: () => {
	queryClient.invalidateQueries({ queryKey: ['리패치하려는 쿼리키'] })
},

3. onError

• 실패 시 호출되는 함수

  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['리패치하려는 쿼리키'], context.previousLikes)
  },

 

 

 

 

 

 

 

📌 적용 결과 비교해보기

적용 전

적용 후

 

 

 

📌 회고 및 느낀점

• Tanstack Query를 이용해 Optimistic Updates를 구현하면서 Tanstack Query에 대해 좀 더 공부해볼 수 있었던 것 같다.
• 그리고 Optimistic Updates를 통해서 사용성도 개선해보면서 뿌듯함을 느낄 수 있었다.
• 사용자 경험을 향상시키고 최적화해볼 수 있는 경험을 쌓아보면서 더 배우고 개선해보고 싶어졌다.

 

 

 

📌 참고

 

https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#optimistic-updates

TanStack | High Quality Open-Source Software for Web Developers