[React Native] Pagination

✅ Pagination

React-native에서 Pagination 구현은 React와 크게 다르지 않다. 오히려 React에서는 스크롤의 위치를 계산해야 한다는 번거로움이 있지만, React-native에서는 FlatList의 기본 property를 통해서 보다 쉽게 구현할 수 있다.

⏩ Pagination(무한스크롤) 구현 예시

const LIMIT = 20

export default function App() {
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  const [loading, setLoading] = useState(false);

  const getData=() => {
    if(loading){
      return;
    }
    setLoading(true);
    fetch("데이터를 가져올 URL")
    .then(res=>res.json())
    .then(result => {
      setData([...data, ...result.slice(offset, offset+LIMIT)]);
      setOffset(offset + LIMIT);
    })
    .then(()=>setLoading(false))
    .catch(err => setLoading(false))
    };

  useEffect(()=>{ 
    getData();
  },[]);

  const renderItem = ({item}) => {
    return <Image style={styles.image} source={{uri: item.url}} />
  }

  const onEndReached = () => {
    getData()
  }

  return (
    <SafeAreaView style={styles.container}>
    <FlatList
    data={data}
    renderItem={renderItem}
    keyExtractor={item => item.id}
    horizontal={false}
    bounces={true}
    onEndReached={onEndReached}
    onEndReachedThreshold={0.6}
    ListHeaderComponent={<Text>나는 헤더다</Text>}
    ListFooterComponent={loading&&<ActivityIndicator size={"large"}/>}
    ListEmptyComponent={<ActivityIndicator size={"small"}/>}
    />
    </SafeAreaView>
  );
}

1. onEndReached
   onEndReachedThreshold로 지정해준 스크롤 지점에 도달했을 때 실행할 함수를 정의할 수 있다. 위 예시에서는 데이터를 20개씩 불러오는 함수를 실행시켰다.

2. onEndReachedThreshold
   onEndReached 함수를 실행시킬 스크롤의 지점을 정할 수 있다. 0이 출발지점 1이 끝지점이며, 보통 무한스크롤의 경우 중반 쯤 내려왔을 때 데이터를 불러오는 것이 자연스럽기 때문에 0.6으로 지정해주었다.