react-query의 데이터 깜빡임 해결 건(placeholderData)

1.문제

컬러 선택 시 데이터 깜빡임

프로젝트에서 **activeColor**에 따라 해당 컬러의 데이터를 불러오는 카테고리 선택 기능이 있음.
이 페이지는 공지사항, 컬러(카테고리), 동영상 컴포넌트로 구성되어 있음.
사용자가 컬러(카테고리)를 변경하면

1. React Query의 queryFn이 다시 실행되면서 데이터를 새로 요청.
2. getGymDetailDatas가 새 데이터를 가져오는 동안 **일시적으로 undefined**로 변경.
3. 이로 인해 공지사항 타이틀이 잠깐 "공지 준비중"으로 표시되었다가, 새 데이터 요청 완료 후 원래 타이틀로 복구됨.

사용자 경험의 문제

기능적으로 큰 문제는 없으나: 카테고리 변경 시 공지사항과 동영상 목록이 깜빡이는 현상이 발생.
프로젝트 특성상 카테고리를 여러 번 변경하는 경우가 많아, 깜빡임 현상이 반복적으로 발생하는 건 좋지 않음, 
공지사항이 없는 경우 "공지 준비중"이라는 텍스트를 보여주게 설정했으나, 데이터 로드 과정에서 이 텍스트가 반복적으로 나타나 신경 쓰이는 부분.

2. 해결 방법

깜빡임 방지

데이터 깜빡임에 관련된 query옵션에 대해 찾아보니 keepPreviousData 가 있었음, 
React Query v5 이전에는 keepPreviousData 옵션을 사용했으나, v5부터는 제거됨.

React Query에서 placeholderData를 활용하여 이전 데이터를 유지함으로써 깜빡임을 방지할 수 있음.
placeholderData는 새 데이터를 가져오는 동안 이전 데이터를 UI에 유지하도록 설정.
v5에서는 React Query가 제공하는 keepPreviousData Identity Function을 placeholderData로 전달하여 동일한 동작을 구현.

useInfiniteQuery의 placeholderData 옵션에 React Query의 keepPreviousData를 전달하여 이전 데이터를 유지하도록 설정

import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";

const [activeColor, setActiveColor] = useState<string | null>(null);
  const [refreshing, setRefreshing] = useState(false);

  //클=라이밍장 디테일 데이터 조회
  const {
    data: getGymDetailDatas,
    refetch,
    isFetchingNextPage,
    hasNextPage,
    fetchNextPage,
    isLoading,
  } = useInfiniteQuery<GymDetailResponseType>({
    queryKey: ["쿼리키", activeColor, gymId],
    queryFn: ({ pageParam = 1 }) =>
      fetchGymDetailDatas({
        pageParam,
        color: activeColor,
        gymId,
      }),
    getNextPageParam: (lastPage) =>
      lastPage.meta.hasNextPage ? lastPage.meta.page + 1 : undefined,
    initialPageParam: 1,
    placeholderData: keepPreviousData,

  });

 

 

데이터 로드 상태 처리

데이터 로드 중에 공지사항 컴포넌트가 깜빡이는 것을 방지하기 위해 캐싱된 데이터를 활용:

<GymNotification
  onPress={notificationClick}
  title={gymNoticeDatas?.title || "공지 준비중"} // 캐시된 데이터 또는 기본값 활용
/>

적용 결과

컬러 선택 시, 공지사항과 동영상 목록의 깜빡임 현상 제거됨.
카테고리를 변경하더라도 너무나 부드럽게 바뀌는게 만족스러움! 

https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#removed-keeppreviousdata-in-favor-of-placeholderdata-identity-function