메인 페이지 플레이리스트 기능을 구현하며, 무한 스크롤을 TanStack Query의 useInfiniteQuery와 Intersection Observer API를 사용해 개발했습니다. 이 기능의 주요 목표는 사용자 경험(UX)을 향상시키는 것이었습니다. 이를 위해 로딩 단계에서 Skeleton UI를 적용하여 콘텐츠가 자연스럽게 로드되는 느낌을 주고자 했습니다.
하지만, 예상치 못한 문제가 발생했습니다.
isFetchingNextPage가 true일 때 Skeleton UI를 적용했지만, 모든 콘텐츠가 새로 렌더링되면서 콘텐츠가 짧은 순간 깜빡이는 현상이 나타났습니다. 이는 사용자에게 부자연스러운 경험을 제공했고, 문제를 해결할 필요성이 대두되었습니다.
해결 과정: keepPreviousData 적용
문제를 해결하기 위해 다양한 문서를 참조하며, 이전 데이터를 유지하는 방법을 찾았습니다. 이를 통해 스크롤이 다음 콘텐츠 영역에 도달해 새로운 데이터를 가져오는 동안 이전 데이터를 유지하도록 설정하면 깜빡임 현상을 방지할 수 있다는 결론을 내렸습니다.
이와 관련된 핵심 옵션은 바로 keepPreviousData였습니다.
const {
data,
isError,
hasNextPage,
fetchNextPage,
isFetchingNextPage,
isLoading
} = useInfiniteQuery({
queryKey: ['playList'],
queryFn: ({ pageParam }) => getPlayList(undefined, pageParam as number),
getNextPageParam: (lastPage, allPages) => {
const nextPage = allPages.length + 1
return nextPage <= lastPage.length ? nextPage : undefined
},
placeholderData: keepPreviousData,
select: data => {
return data.pages.flat()
},
initialPageParam: 1,
staleTime: 1000 * 60,
enabled: isMainPage
})
placeholderData:keepPreviousData를 통해 해결할 수 있었습니다.
placeholderData는 데이터가 준비되지 않았을 때 초기 상태로 임시 데이터를 설정하는 데 사용됩니다.
💥주요 특징
-
초기 데이터:
placeholderData는 첫 로드 시 사용자에게 즉각적으로 보일 데이터를 제공하여 로딩 상태를 덜 느끼게 합니다. -
캐싱과 연계: 실제 데이터가 로드 된 후 React Query는
placeholderData를 대체합니다.
후기
이 경험을 통해 사용자 경험을 향상시키기 위해 LoadingSpinner, Skeleton UI, Toast 등 다양한 UI 요소를 적재적소에 적절히 사용해야 한다는 점을 다시 느꼈습니다. 또한, 기술 블로그를 통해 Skeleton UI가 오히려 사용자 경험을 떨어뜨릴 수 있다는 새로운 관점도 배웠습니다.
📚 추천 읽을 거리
https://tech.kakaopay.com/post/skeleton-ui-idea/
https://www.sktenterprise.com/bizInsight/blogDetail/dev/13229
