[prefetch] - 화면 깜빡거림 해결 (3차 팀프로젝트 리팩토링 #두 번째)⚙️

간략한 팀프로젝트 소개

• 카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼
• 특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)

이전 리팩토링 과정

(1) - [스켈레톤 UI] 화면 깜빡거림 해결

---

이번 리팩토링은 페이지가 있는 게시글 목록에서 다른 페이지로 이동할 경우 화면이 깜빡거리는 현상이 발생하여 `tanstack query` 의 `prefetchQuery` 를 이용하여 해당 문제를 해결했다.  

 

💡 변경 방법

기존에는 페이지를 이동하고 나서 해당 페이지의 데이터를 요청했다. 따라서 필연적으로 깜빡거리는 문제가 발생했다.

따라서 미리 데이터를 요청하는 `prefetchQuery` 를 사용해보기로 했다.

 

방법은 생각보다 어렵지는 않았다. `onMouseOver` 이벤트를 이용해서 페이지 버튼에 마우스를 올린 순간 미리 데이터를 캐싱하는 방법을 사용했다. 

 

📍 예시 코드 

onMouseOver

<div key={page} onMouseOver={() => onMouseOver(page)}>
    <Link to={`${url}/${page}`}>
        <button>{page}</button>
    </Link>
</div>

• page 버튼에 `onMouseOver` 이벤트를 넣어주었다.

 

prefetchQuery

    const onPageMouseOver = (page) => {
        queryClient.prefetchQuery({
            queryKey: [`endpoint/${page}`],
            queryFn: () => api.getDetails(page)
        });
    };

• `onMouseOver` 이벤트가 실행되면 해당 함수에 page를 전달한다.
• 해당 함수에서 `prefetchQuery` 를 이용해서 데이터를 캐싱한다.

 

📍 변경 목적

내 눈에 너무 거슬렸다. 사용자에게 긍정적인 .. 어쩌구를 주고 싶었다. 그리고 디테일적인 부분에서 느껴지는 완성도가 다르다고 생각하기 때문에 이런 부분을 못견디겠어서 변경했다.