React native 무한스크롤 (FlatList)

citron03·2022년 9월 25일
0

React Native

목록 보기
2/7
  • FlatList는 ScrollView처럼 많은 양의 데이터를 처리할 수 있게 해준다.
  • react에서 map을 쓰는 것 처럼 FlatList를 사용할 수 있고, 추가적으로 다양한 기능을 제공받을 수 있다.
  • FlatList를 사용하기 위해서는 renderItem와 data props가 반드시 필요하다.
  • 또한 map을 사용할 떄 key를 설정해주는 것처럼 FlatList에서는 keyExtractor로 키를 설정해준다.
  • onEndReached를 통해서 리스트에 끝에 도달했을 때 실행될 함수를 설정할 수 있다.
  • onEndReached에 새로운 데이터를 불러오는 함수를 연결함으로써, 무한스크롤을 구현한다.
  • onEndReachedThreshold는 마지막 컨텐츠의 얼마만큼에 도달했을 때 onEndReached 함수를 호출할지 설정한다.
  • ListFooterComponent는 리스트의 맨 끝 Footer에 노출될 함수를 설정한다.
import React, { useState } from "react";
import { FlatList, View, Text } from "react-native";
import styled from "styled-components/native";

const initData = [{
    title: "title",
    content: "content",
    id: 1
}, {
    title: "title",
    content: "content",
    id: 2
}, {
    title: "title",
    content: "content",
    id: 3
}, {
    title: "title",
    content: "content",
    id: 4
}, {
    title: "title",
    content: "content",
    id: 5
}, {
    title: "title",
    content: "content",
    id: 6
}, {
    title: "title",
    content: "content",
    id: 7
}, {
    title: "title",
    content: "content",
    id: 8
}, {
    title: "title",
    content: "content",
    id: 9
}, {
    title: "title",
    content: "content",
    id: 10
}]

const InfinityList = () => {
    const [dummyData, setDummyData] = useState(initData);
    const [isLoading, setIsLoading] = useState(false);
    const onEndReached = () => {
        if(!isLoading) {
            setIsLoading(true);
            setTimeout(() => {
                setDummyData((prev) => 
                	[...prev, {
                    	id: prev[prev.length - 1].id + 1,
                        content: "new content", 
                        title: "new title"}]
                    );
                setIsLoading(false);
            }, 3000);
        }
    }
    return (
        <FlatList
            data={dummyData}
            renderItem={renderItem}
            keyExtractor={(item) => item.id}
            onEndReached={onEndReached}
            onEndReachedThreshold={0.8}
            ListFooterComponent={
            	isLoading && 
            	<LoadingText>loading...</LoadingText>
            }
            refreshing={isLoading}
            onRefresh={() => console.log(isLoading)}
        />
    )
}

const renderItem = ({ item }) => {
    return (
      <OuterView>
        <View>
          <Text>id: {item.id}</Text>
        </View>
        <View>
          <Text>title: {item.title}</Text>
        </View>
        <View>
          <Text>content: {item.content}</Text>
        </View>
      </OuterView>
    );
};

const OuterView = styled.View`
    margin: 20px;
`

const LoadingText = styled.Text`
    text-align: center;
    color: red;
    font-weight: 700;
    margin: 15px;
    padding: 15px;
    border-width: 1px;
`

export default InfinityList;
  • refreshing과 onRefresh을 설정하면 화면을 위로 당겼을 떄, 새로고침 기능을 구현할 수 있다.

  • onRefresh에 새로고침 시 어떤 이벤트가 일어날지 함수를 연결한다.

참고 자료 : https://reactnative.dev/docs/flatlist

profile
🙌🙌🙌🙌

0개의 댓글