스노로즈는 숙명인이 직접 만들고 운영하는, 숙명인을 위한 커뮤니티예요.
저는 2024년 6월부터 프론트엔드 개발에 참여해 기존 WordPress와 PHP 기반의 서비스를 React로 새롭게 전환했습니다. 현재는 10월 12일 리뉴얼 오픈을 앞두고 있어요.
게시글이나 댓글을 작성하면 포인트가 지급되도록 되어 있었는데, 정상적으로 포인트가 지급되었음에도 화면에는 즉시 반영되지 않고 새로고침을 해야만 업데이트되는 문제가 있었습니다.
이 때문에 사용자가 포인트가 지급되지 않았다고 오해할 수 있었고, 작성과 동시에 포인트가 실시간으로 반영되도록 개선이 필요했어요.
문제는 React Query의 캐시 업데이트 누락에 있었습니다.
예를 들어 댓글을 삭제할 경우, 관련된 댓글 목록은 invalidateQueries로 갱신되고 있었지만, 포인트 정보를 담고 있는 userMe 데이터는 캐시 갱신 대상에 포함되지 않았습니다.
그 결과, UI에서는 여전히 이전 포인트 데이터를 보여주고 있었던 거죠.
useUserInfo 훅 수정
useUserInfo 훅 내부에서 사용할 수 있도록 invalidateUserInfoQuery 유틸 함수를 새로 정의했어요.
이 함수는 QUERY_KEY.userMe에 해당하는 캐시를 무효화하는 역할을 합니다.
Copy
export const invalidateUserInfoQuery = () => {
queryClient.invalidateQueries([QUERY_KEY.userMe]);
};포인트가 변경되는 모든 액션(게시글/댓글 등록 및 삭제) 후 캐시 무효화 적용
포인트는 게시글이나 댓글을 등록하거나 삭제할 때마다 변경되지만, 기존에는 해당 작업 이후 userMe 데이터를 다시 불러오는 로직이 없었습니다.
그래서 모든 포인트 변화 액션 이후 invalidateUserInfoQuery()를 호출해 React Query의 userMe 캐시를 무효화하도록 개선했어요.
useComment 훅: 댓글 작성/삭제 후 onSuccess 내부에서 invalidateUserInfoQuery() 호출PostWritePage, PostPage: 게시글 생성/삭제 이후에도 동일하게 호출이제 사용자 포인트는 새로고침 없이도 즉시 UI에 반영됩니다.
onSuccess: () => {
...
invalidateUserInfoQuery();
}새로고침 없이도 포인트가 즉시 반영되도록 로직을 수정했어요.
처음에는 놓치고 있던 부분이었지만, 알파 테스트 과정에서 해당 이슈를 발견하면서 개선할 수 있었습니다. 이번 경험을 통해 React Query를 사용할 때 캐시 무효화의 중요성을 다시 한 번 느꼈습니다.
앞으로는 데이터를 수정하는 로직을 작성할 때, 관련된 캐시가 제대로 invalidate되고 있는지도 꼭 챙기려 합니다 :)