문제 상황 🤔
api 요청시, 파람을 다르게 주면서 데이터에 필터링을 걸어주고 있던 상황이었다.
깜빡임이 너무 심했지만 일단 외면하고 있었는데...
isLoading때 보여주는 ui가 없어서 깜빡임이 심한 거라고 생각했기 때문에 스켈레톤 ui를 구현해 해결하려고 했다.
▶구현 영상
그러나 스켈레톤 ui가 거의 안 보일 정도로 로딩 시간은 짧고, 이 깜빡임이 로딩 시간의 문제가 아니라는 것을 깨달았다. 😥
문제 인지 😯
잘보면 데이터 필터 과정 중 이전 데이터가 같이 나오는 것을 볼 수 있다.
즉, 데이터 패칭 과정에서 이전 데이터가 남아있어 그런 것이었다.
✔ 그럼 어떻게 코드를 변경할 수 있을까?
문제 해결 🎉
현재 나는 search바에서 데이터 패칭을 모두 해주고 있었는데, 여기서 refetch만 해주고 remove는 해주고 있지 않았다.
그래서 queryParam -> 즉 필터링이 변경될 때마다 queryClient.removeQueries({queryKey : ['posts']})를 함께 적용함으로써 이를 해결할 수 있었다.
이전 데이터를 지우고, 다시 받아오게 해준 것이당😋
▶구현 영상
이전보다 깜빡임이 사라지고, 사용자가 보기 훨씬 편해진 모습으로 수정되었다!
사용자가 사이트 접속 후 마우스를 움직이지 않으면 로딩 시간이 길어져 어차피 스켈레톤 ui도 적용해야 했는데, 이 덕분에 스켈레톤도 빠르게 적용하고 깜빡임을 없애는 최적화(?)는 아니지만 리팩터를 할 수 있었다! 😜
tanstackQuery 사용 추천
tanstackquery를 통해 임의로 로딩과 에러를 제어해서 화면에서 좀 더 쉽게 문제점을 찾을 수 있었다. 다들 꼭 사용하길 👍
