React Query의 UX향상 옵션,

여기에서 소개할 기능들은 사용자 경험을 향상시키기 위해 꼭 알아야 하는 핵심 옵션이야!

🔍 Optimistic Updates (낙관적 업데이트)

• 서버 응답 전에 화면을 먼저 업데이트하는 기능.
• 사용자가 변경 사항을 즉시 확인할 수 있어 빠르고 부드러운 경험을 제공.
• (예제)

const mutation = useMutation(
  (newLike) => axios.post('/api/like', newLike),
  {
    onMutate: (newLike) => {
      queryClient.setQueryData(['likes'], (oldLikes) => [...oldLikes, newLike]);
    },
    onError: () => {
      queryClient.invalidateQueries(['likes']); // 실패 시 상태 복구
    },
  }
);

🙌 쉽게 비유하자면: 좋아요 버튼을 누르자마자 숫자가 올라가는 것처럼, 결과를 믿고 미리 보여주는 경험이야!

🔍 Prefetching (미리 가져오기)

• 사용자가 요청하기 전에 데이터를 미리 가져오는 기술.
• 사용자가 특정 페이지나 데이터를 클릭하기 전에 데이터를 준비해 두어 로딩 없이 즉시 표시.
• (예제)

queryClient.prefetchQuery(['posts', postId], () =>
  axios.get(`/api/posts/${postId}`).then((res) => res.data)
);

🙌 쉽게 비유하자면: "미리 데운 음식"과 같아요. 손님이 주문하기 전에 음식을 준비해 두면, 빠르게 제공할 수 있어!

🔍 keepPreviousData

• 데이터가 변경되더라도 이전 데이터를 유지해 깜빡임을 방지하는 기능.
• 사용자 경험을 매끄럽게 만들기 위해 중요한 옵션.
• (예제)

const { data, isFetching } = useQuery(
  ['posts', page],
  () => fetchPosts(page),
  { keepPreviousData: true }
);

🙌 쉽게 비유하자면: "대기열 유지"와 같아요. 새로운 데이터를 가져오는 동안 기존 데이터를 유지해 화면이 깜빡이지 않아.

🔍 useInfiniteQuery (무한 스크롤 구현)

• 데이터를 페이지 단위로 가져오면서, 사용자가 스크롤할 때마다 데이터를 추가로 로드하는 기능.
• 무한 스크롤을 쉽게 구현할 수 있어.
• (예제)

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
  ['posts'],
  ({ pageParam = 1 }) => fetchPosts(pageParam),
  {
    getNextPageParam: (lastPage) => lastPage.nextPage || undefined,
  }
);

🙌 쉽게 비유하자면: "자동 밥 리필"과 같아요. 밥그릇이 비면 자동으로 밥을 채워주는 것처럼 데이터를 제공해.

🚀 진짜 쉬운 설명

• Optimistic Updates: 서버 요청 전에 결과를 먼저 화면에 표시.
• Prefetching: 필요한 데이터를 미리 가져와 빠른 로딩 경험 제공.
• keepPreviousData: 데이터 변경 시에도 기존 데이터를 유지.
• useInfiniteQuery: 무한 스크롤로 데이터를 동적으로 로드.

React Query의 이 옵션들을 활용하면 사용자 경험을 대폭 향상시킬 수 있어!

---

✏️ 더 알아가기

• 페이지네이션 vs 무한 스크롤
  페이지네이션과 무한 스크롤은 사용자가 데이터를 탐색하는 방법을 제공하는 두 가지 주요 패턴이야.

구분	페이지네이션	무한 스크롤
정의	데이터를 페이지 단위로 나누어 사용자가 이동할 수 있게 제공.	사용자가 스크롤을 내릴 때마다 데이터를 로드하는 방식.
UX 특성	명확하게 페이지를 구분하여, 사용자가 특정 페이지로 쉽게 이동 가능.	끊김 없는 사용자 경험 제공. 자연스럽게 데이터를 추가.
장점	- 사용자가 원하는 페이지를 쉽게 선택 가능.	- 페이지를 기억하기 쉬움.
단점	- 사용자가 페이지를 전환할 때 약간의 로딩이 발생.	- 클릭/탐색 작업 필요.
사용 사례	검색 결과 페이지 (예: 구글 검색, 쇼핑몰)	SNS 피드, 뉴스 앱 (예: 인스타그램, 페이스북)
적합한 데이터 양	큰 데이터 양에 적합. 사용자가 원하는 위치로 점프 가능.	비교적 적은 양의 데이터를 자연스럽게 소비할 때 적합.

• 페이지네이션은 명확한 데이터 구분이 필요한 경우, 특히 검색 결과나 쇼핑몰에서 적합.
• 무한 스크롤은 사용자가 데이터를 자연스럽게 소비해야 하는 SNS나 뉴스 앱에 유리.