React/ TypeScript 좋아요 기능 Optimistic Updates 구현하기

오늘은 우리 프로젝트의 '좋아요' 버튼 기능을 개선하기로 했다.

기존에는 사용자가 '좋아요' 버튼을 클릭하면 , 데이터베이스의 변경이 완료될 때까지 사용자가 결과를 보기 위해 기다려야했다. (좋아요 버튼 클릭시 하트 색깔, 좋아요 카운트가 반영되기까지 약간의 시간이 걸림) 이를 개선하기 위해 Optimistic updates를 적용해보기로 했다.

 

옵티미스틱 업데이트는 사용자의 상호작용에 대한 즉각적인 피드백을 제공하고, 서버 응답을 기다리지 않고도 UI를 업데이트 한다.

 

1. 적용전

 

처음에는 updateLikedUsers 함수에서 서버에 변경을 요청하고, 서버 응답을 받은 후에 화면을 업데이트 했다.

firebase 업데이트 부분

useMutation Hook

 

2. 옵티미스틱 업데이트 적용

옵티미스틱 업데이트에서는 onMutate, onError, onSettled가 필수적으로 사용된다.

 

onMutate:

이 함수는 서버에 mutation 요청을 보내기 전에 호출된다. 옵티미스틱 업데이트를 구현하기 위해서는 서버 요청전에 UI를 미리 업데이트 해야한다. onMutate는 이런 상황에서 이전 상태를 저장하고 가정된(예정된) 새로운 상태로 UI를 업데이트하는데 쓰인다.

 

onError:

서버 요청이 실패했을때 호출된다. 이부분은 옵이티스틱 업데이트에서 중요한 부분이다. 왜냐하면 onMutate에서 미리 적용한 변경사항을 원래대로 되돌려야할 수도 있기 때문이다. onError에서는 onMutate에 저장한 이전 상태를 사용하여 UI를 원래 상태로 '롤백'한다.

 

onSettled:

mutation 작업이 성공하든 실패하든, 최종적으로 호출된다. 옵티미스틱 업데이트에서 onSettled는 mutation 작업 후에 필요한 정리작업을 수행하는데 사용된다. 캐시된 데이터를 갱신하거나 다른 UI업데이트를 수행하는 것이 여기에 들어갈 수 있다.

 

수정된 useMutation 코드

 

 

설명

onMutate에서 가장 첫번째로 수행되어야하는 일은 기존 쿼리를 취소(cancelQueries)하고, 현재 쿼리 데이터를 저장(getQueryData - 특정 쿼리키에 해당하는 캐시된 데이터를 가져옴)하는 것이다.

 

if 문 이하에서 '좋아요' 상태를 변경하는 로직((old)=> { ...})에 따라 현재 사용자의 상태에 따라 업데이트하고, 새로운 상태를 쿼리 클라이언트에 저장(setQueryData)한다.

 

옵티미스틱 업데이트 구현 시 onMutate에서 이전 상태를 저장하고 반환할 수 있다. return문을 사용하여 반환하는 값(  return { previousPosts: previousPosts ?? [] })은 mutation 과정에서 context로 사용된다. onError와 onSettled 콜백에서는 onMutate에서 반환된 context를 인자로 받을 수 있다.  onError에서는 mutation 실패시 context를 사용하여 이전 산태로 롤백하는 작업을 수행할 수 있고, onSettled에서는 mutation이 성공하거나 실패한 후에 호출되며 여기서도 context에 접근할 수 있다. 

 

onError에서는 context 객체 내에 previousPosts라는 프로퍼티가 존재하고, 그 값이 undefined나 null이 아닌 확인한다. 

만약 error가 발생하면 setQueryData 메서드를 사용하여 쿼리 키에 해당하는 캐시된 데이터를 context.previousPosts로 업데이트한다. 이는 사실상 캐시에 저장된 현재 데이터를 onMutate에서 저장해둔 이전 데이터로 교체(롤백)하는 것이다.

 

mutation 성공여부와 관계없이 최종적으로 onSettled가 실행된다. invalidateQueries메서드를 사용하여 현재 쿼리키에 해당하는 캐시된 쿼리 데이터를 무효화한다. 쿼리데이터를 무효화하면 React Query가 해당 쿼리 키에 연결된 쿼리를 자동으로 다시 실행하여 최신 데이터를 가져온다. 이렇게 하면 데이터를 일관성있게 관리하고 최신 상태를 유지하는 데 매우 유용하다. mutation 작업이 완료된 후에 관련된 데이터가 변경되었을 가능성이 있으므로, 이를 통해 캐시된 데이터를 최신 상태로 갱신할 수 있다.