🚨 문제 상황
현재 마이페이지에서는 유저 API를 통해 닉네임과 프로필 뮤직을, 유저 포스트 API를 통해 게시글 데이터를 불러오고 있습니다.
마이페이지로 이동할 때마다 유저 API와 유저 포스트 API를 호출하며, 프로필 수정 페이지로 이동할 때도 유저 API가 매번 호출되는 것을 확인할 수 있습니다.
이 데이터들은 사용자가 특정 작업을 수행하지 않는 한 변하지 않으므로, Tanstack Query를 활용해 캐싱하면 API 호출을 줄일 수 있다고 판단했습니다.
TanStack Query을 이용한 데이터 캐싱
마이페이지와 프로필 수정 페이지에서 불필요한 API 호출을 줄이기 위해 TanStack Query의 staleTime 과 invalidateQueries을 활용한 캐싱 전략을 적용했습니다.
✅ staleTime를 활용한 데이터 캐싱
유저 정보와 게시글 데이터는 사용자가 특정 작업을 수행하지 않는 한 변하지 않으므로, staleTime 을 5분으로 적용해 불필요한 API 재요청을 최소화했습니다.
✅ invalidateQueries을 활용한 데이터 업데이트
staleTime 적용으로 인해 캐시된 데이터가 fresh 상태일 경우, 사용자가 게시물을 수정하거나 프로필을 변경해도 화면이 즉시 업데이트 되지 않습니다.
이를 해결하기 위해, 게시물 생성, 수정, 삭제 등 데이터 변경 작업이 성공적으로 완료되면 invalidateQueries를 사용해 관련된 캐시를 강제로 무효화하도록 처리했습니다. 이렇게 하면 staleTime과 관계없이 해당 데이터는 즉시 stale 상태가 되어, 다음 렌더링 시점에 언제나 최신 데이터를 서버로부터 가져와 사용자에게 보여줄 수 있습니다.
✅ 로그아웃 시 캐시 초기화
로그아웃 시 기존 캐시가 남아 있으면, 다른 계정으로 로그인할 때 이전 유저의 데이터가 남아있는 문제가 발생할 수 있습니다. 이를 방지하기 위해 로그아웃 시 queryClient.clear()를 사용하여 모든 캐시를 삭제하게 처리했습니다.
🚀 결과
마이페이지와 프로필 수정 페이지 이동 시 불필요한 API 호출을 방지하고, 필요한 경우에만 데이터를 갱신하도록 최적화하여 API 호출을 최소화하면서도 최신 데이터를 유지할 수 있도록 개선했습니다.
출처 :
