React Native Flatlist 실제 사용 사례 튜토리얼

모바일 애플리케이션의 75%는 목록과 양식으로 만들어집니다.

네 제가 그 75%를 차지했지만 Facebook, Youtube, Instagram, Safari, Chrome, Whatsapp 등과 같이 매일 사용하는 앱에 대해 생각해 보세요.

따라서 목록 구현 방법을 마스터하는 것은 모바일 앱 개발의 37.5%를 마스터하는 것과 같습니다.

이 자습서는 실제 사용 사례에서 React Native 내장 구성 요소인 Flatlist을 사용하는 방법을 보여주기 위한 것입니다. 끌어서 새로 고침 및 무한 로드(또는 스크롤 로드)에 대해 이야기하고 있습니다.

기초적인

Skip this section if you've already used Flatlist before.

Flatlist 사용법은 이해하기 매우 간단합니다.

const DATA = [{title: 'Item 1'}, {title: 'Item 2'}, {title: 'Item 3'}];

function Item({ title }) {
  return (
    <View>
      <Text>{title}</Text>
    </View>
  );
}

<FlatList data={DATA} renderItem={({item}) => <Item title={item.title} />} />;

2개의 필수 소품이 있습니다.

data : 항목 데이터가 포함된 일반 배열

renderItem : data 배열의 모든 항목에 대해 호출되는 함수는 렌더링할 React 구성 요소를 반환합니다.

당겨서 새로고침

자신의 Facebook 또는 Instagram 피드에서 매일 이 기능을 사용할 수 있습니다. 사용자는 풀다운하여 목록에 최신 콘텐츠를 로드할 수 있습니다.



다음은 간단한 구현입니다.

const RefreshableFeed = () => {
  const [items, setItems] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
  const fetchItems = useCallback(async () => {
    if (refreshing) return;
    setRefreshing(true);
    const newItems = await apiCallToGetItems();
    setItems(newItems.concat(items));
    setRefreshing(false);
  }, [refreshing]);

  return (
    <FlatList
      onRefresh={fetchItems}
      refreshing={refreshing}
      data={items}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
};

FlatList 이미 Pull to refresh 구현을 정말 쉽게 만드는 2개의 props를 제공합니다.

onRefresh : 사용자가 풀다운할 때 호출되는 함수입니다.

refreshing : 새 데이터를 가져오는지 여부를 나타내는 부울입니다.

간단하게 끌어서 새로 고침 기능을 구현했습니다. 더 많은 사용자 지정을 위해 RefreshControl component 과 함께 FlatList의 refreshControl 소품을 사용할 수 있습니다.

무한 로드(스크롤 로딩)

예를 들어 트위터에서는 모든 새로운 트윗을 한 번에 로드하는 대신 일부만 로드하여 표시하고 거의 끝을 스크롤하면 더 많이 로드하고 새로 로드된 트윗을 끝에 추가하여 스크롤을 무한대로 만듭니다.



다시 한 번 간단한 구현:

const InfiniteFeed = () => {
  const [loading, setLoading] = useState(false);
  const [items, setItems] = useState([]);
  const loadMoreItems = useCallback(async () => {
    if (loading) return;
    setLoading(true);
    const newItems = await apiCallToLoadMoreItems();
    setItems(items.concat(newItems));
    setLoading(false);
  }, [loading]);

  return (
    <FlatList
      onEndReached={loadMoreItems}
      data={items}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
};

이 기능을 구현하는 데 1개의 소품만 필요하며 매우 직관적입니다.

onEndReached : 목록 끝에 도달했을 때 호출할 함수입니다.

FlatList의 onEndReachedThreshold 소품을 사용하여 위 함수를 트리거할 시기를 정의할 수도 있습니다.

로드 표시기를 표시하려면 다음을 추가하는 것만 큼 간단합니다.

//...
  return (
    <FlatList
      ListFooterComponent={() => {
        if (!loading) return null;
        return <ActivityIndicator />;
      }}
    />
  );

결론

이제 목록의 가장 중요한 두 가지 기능을 구현하는 방법을 알게 되었습니다. 추가 라이브러리나 복잡한 코드를 사용하지 않고.

그러나 이러한 예는 새 데이터/새로 고친 데이터를 처리하는 데 중점을 두지 않는다는 점에 유의하십시오. API에 따라 목록의 항목을 업데이트할 때 페이지 매김, 중복 확인 등을 사용해야 할 수도 있습니다.

참조

https://reactnative.dev/docs/flatlist

https://reactnative.dev/docs/activityindicator

https://reactnative.dev/docs/refreshcontrol

https://reactjs.org/docs/hooks-reference.html#usestate

https://reactjs.org/docs/hooks-reference.html#usecallback