Tanstack Query와 Optimistic Update로 Autowini 좋아요 기능 구현하기

Autowini 좋아요

 

Optimistic Update란 무엇일까?

Optimistic Update는 한국말로는 낙관적 업데이트라고 말합니다. 성공적인 상태 업데이트가 이뤄질 거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법입니다.

사용자 요청을 서버가 성공적으로 처리할 거라고 미리 예상하고, UI를 즉각적으로 변경해서 사용자에게 서버 응답 속도와 관계없이 즉각적인 피드백을 제공해서 사용자들이 시스템을 빠르게 쓸 수 있다는 점입니다.

특히 네트워크 상태가 좋지 않거나 응답 시간이 길어도 사용자 경험에는 영향을 덜 미치게 됩니다.

다만, 서버에서 오류가 발생하면 잠시동안 화면에 잘못된 정보가 표시될 수 있습니다. 따라서 이 경우를 대비한 오류 핸들링(롤백) 로직을 같이 설계해야 하는 주의점이 있습니다.

 

Autowini 좋아요 기능 개발 후기

Autowini의 좋아요 페이지는 레거시 프로젝트로, JSP 기반 관리와 불필요한 코드들로 인해 매물 데이터를 확인하거나 좋아요를 누를 때마다 불필요한 새로고침과 비효율적인 로직이 발생했습니다. 이에 따라 기존 v1 API를 v2 API로 교체하는 작업을 시작했으며, 이 과정에서 좋아요 기능의 UX 개선을 목표로 개발을 진행했습니다.

 

기존 로직과 새로운 접근

초기에는 API를 통해 매물 정보를 표시하고, API 통신이 성공하면 상태값을 업데이트하는 전통적인 방식을 사용했습니다. 그러나 좋아요 버튼 클릭 시, 즉각적인 피드백을 제공하기 위해 다음과 같은 방식을 도입했습니다:

1. 상태 관리:
   • useState를 활용해 매물 하나하나의 상태를 관리.
   • 좋아요 버튼 클릭 시 하트 아이콘이 빨간색으로 바뀌고, 좋아요 수가 +1 증가하는 방식으로 즉각적인 피드백을 제공.
2. Tanstack Query의 useMutation 활용:
   • onSuccess: API 요청 성공 시 성공 메시지 토스트 출력.
   • onError: API 요청 실패 시 상태를 롤백(useState 값 -1)하고 실패 메시지 출력.

이 과정에서 자연스럽게 Optimistic Update를 적용하게 되었는데, 이전 개인 프로젝트 경험이 도움이 되어 신기함과 뿌듯함을 느낄 수 있었습니다.

 

Optimistic Update의 이해와 한계

개발 후 Optimistic Update의 개념을 다시 학습하며, 다음과 같은 내용을 알게 되었습니다:

• 장점:
  • 좋아요 버튼과 같은 즉각적인 UI 변경이 필요한 기능에 적합.
  • 네트워크 응답 대기 시간과 관계없이 사용자 경험(UX)을 향상.
• 한계:
  • 민간함 데이터(예: 결제, 거래 내역)에는 부적합.
  • 네트워크 불안정 시 실패율이 높아져 잦은 롤백 발생 가능성.
  • 요청에 실패한다면 민감도 높은 정보가 순간적으로 잘못 표시되면서 사용자 경험을 크게 저해할 수 있음.

이번 개발을 통해 Optimistic Update의 장점과 한계를 모두 경험했으며, 이 개념을 보다 깊이 이해하게 되었습니다.

앞으로도 상황에 맞는 기술 선택과 적용을 통해 더 나은 사용자 경험을 제공하는 개발자가 되고 싶습니다.