React Query로 무한스크롤 - FlatList 무한 스크롤 (2)

Infinite Scroll with React Query - FlatList Infinite Scroll (2)

import axios from 'axios';
 
// 게시글 데이터 타입
interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}
 
// API 응답 예상 타입 (데이터 배열과 다음 페이지 정보 포함)
interface PostsResponse {
  data: Post[];
  nextPage?: number; // 다음 페이지 번호 (API가 제공하지 않으면 직접 계산)
}
 
// useInfiniteQuery가 사용할 데이터 로딩 함수
// pageParam의 타입은 useInfiniteQuery의 initialPageParam 타입과 일치해야 합니다.
const fetchPostsReactQuery = async ({ pageParam }: { pageParam: number }): Promise<PostsResponse> => {
  console.log(`Fetching page ${pageParam} with React Query (v5)...`);
 
  // --- 로딩 확인용 1초 지연 ---
  await new Promise(resolve => setTimeout(resolve, 1000));
  // --------------------------
 
  const response = await axios.get<Post[]>(
    `https://jsonplaceholder.typicode.com/posts?_page=${pageParam}&_limit=10`
  );
 
  // API 응답에 다음 페이지 정보가 없으므로, 받아온 데이터 유무로 판단
  const hasMoreData = response.data.length > 0;
 
  // useInfiniteQuery가 이해할 수 있는 형태로 데이터를 반환해야 함
  return {
    data: response.data, // 현재 페이지 데이터
    nextPage: hasMoreData ? pageParam + 1 : undefined, // 다음 페이지 번호, 없으면 undefined
  };
};

import React from 'react';
import { View, FlatList, Text, ActivityIndicator, StyleSheet, SafeAreaView } from 'react-native';
import { useInfiniteQuery, QueryClient, QueryClientProvider, InfiniteData } from '@tanstack/react-query';
 
// ...
 
// 컴포넌트 내에서 useInfiniteQuery 사용
const PostsScreenWithReactQueryComponent: React.FC = () => {
  const {
    data,             // 타입: InfiniteData<PostsResponse, number> | undefined
    error,            // 에러 상태 객체
    fetchNextPage,    // 다음 페이지 데이터를 가져오는 함수
    hasNextPage,      // 다음 페이지 존재 여부 (boolean)
    isFetching,       // 모든 종류의 데이터 가져오기 진행 여부
    isFetchingNextPage, // '다음 페이지' 데이터만 가져오는 중인지 여부 (boolean)
    isLoading,        // '초기' 데이터 로딩 중인지 여부 (boolean)
  } = useInfiniteQuery({
    queryKey: ['posts'],                // 쿼리 키: 이 쿼리 데이터를 식별하는 고유 키
    queryFn: fetchPostsReactQuery,      // 위에서 정의한 데이터 가져오기 함수
    initialPageParam: 1,                // 초기 페이지 파라미터 (필수!)
    // 다음 페이지 파라미터(pageParam)를 결정하는 함수
    // lastPage는 가장 최근에 가져온 페이지의 데이터(PostsResponse 객체)입니다.
    getNextPageParam: (lastPage: PostsResponse) => lastPage.nextPage,
    // (선택적) 제네릭 타입 명시 (타입 추론이 잘 되므로 대부분 생략 가능)
    // <PostsResponse, Error, InfiniteData<PostsResponse, number>, string[], number>
  });
 
  // ... (FlatList 렌더링 로직) ...
};
 
// ... (스타일 정의 및 QueryClientProvider 래퍼) ...

  // 초기 로딩 상태 처리
  if (isLoading) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.centered}>
          <ActivityIndicator size="large" color="#007AFF" />
        </View>
      </SafeAreaView>
    );
  }
 
  // 에러 상태 처리
  if (error) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.centered}>
          <Text>오류가 발생했습니다: {error.message}</Text>
        </View>
      </SafeAreaView>
    );
  }
 
  // FlatList에 필요한 데이터 형태로 변환 (모든 페이지 데이터 합치기)
  // data 객체는 InfiniteData<PostsResponse, number> 타입이며, data.pages는 PostsResponse[] 타입입니다.
  const allPosts = data?.pages.flatMap(page => page.data) ?? [];
 
  // 아이템 렌더링 함수 (동일)
  const renderItem = ({ item }: { item: Post }) => (
    <View style={styles.itemContainer}>
      <Text style={styles.itemTitle}>{item.id}. {item.title}</Text>
      <Text style={styles.itemBody}>{item.body}</Text>
    </View>
  );
 
  // 리스트 하단 로딩 인디케이터
  const renderFooter = () => {
    return isFetchingNextPage ? <ActivityIndicator size="large" color="#007AFF" style={styles.loader} /> : null;
  };
 
  // 스크롤 끝 도달 시 호출될 함수
  const handleLoadMore = () => {
    console.log(`onEndReached triggered (RQ). hasNextPage=${hasNextPage}, isFetchingNextPage=${isFetchingNextPage}`);
    if (hasNextPage && !isFetchingNextPage) {
      console.log('handleLoadMore (RQ) is calling fetchNextPage...');
      fetchNextPage();
    } else {
       console.log('handleLoadMore (RQ) determined not to call fetchNextPage.');
    }
  };
 
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={allPosts}
        renderItem={renderItem}
        keyExtractor={(item) => item.id.toString()}
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.5}
        ListFooterComponent={renderFooter}
        contentContainerStyle={styles.listContainer}
      />
    </SafeAreaView>
  );
 
// --- 스타일 정의 ---
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  listContainer: { paddingHorizontal: 15, paddingTop: 10, paddingBottom: 30 },
  itemContainer: { backgroundColor: '#f9f9f9', padding: 15, marginBottom: 12, borderRadius: 8, borderWidth: 1, borderColor: '#eee', shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 2, elevation: 2 },
  itemTitle: { fontSize: 17, fontWeight: '600', marginBottom: 6, color: '#333' },
  itemBody: { fontSize: 14, color: '#666', lineHeight: 20 },
  loader: { marginVertical: 25, alignItems: 'center' },
});
 
// QueryClientProvider 래퍼 컴포넌트 (실제 앱 구조에 맞게 조정 필요)
const queryClient = new QueryClient(); // 실제로는 App.tsx에서 생성된 것을 사용
const PostsScreenWithReactQuery: React.FC = () => (
  <QueryClientProvider client={queryClient}>
    <PostsScreenWithReactQueryComponent />
  </QueryClientProvider>
);
 
export default PostsScreenWithReactQuery;