[리액트 네이티브] FlatList_아래로 스크롤해서 게시글 불러오기📜 / expo, 안드로이드, 무한스크롤

 

[React Native_ FlatList]

 

FlatList로 무한 스크롤하는 방법에 대해 알아보자

 

---

 

<STUDY>

 

``````

import React, { useState } from 'react';
import { View, FlatList } from 'react-native';
import RenderItem from './item'; // 리스트에 보여줄 컴포넌트

``````

export default function App() {
  // data : 렌더링할 데이터 리스트
  const data = [
    {key: value},
  ];

  // 새로고침 state
  const [isRefreshing, setIsRefreshing] = useState(true);

  const handleRefresh = () => {
    setIsRefreshing(false);
  
    // 새로고침 했을 때 호출할 함수
      setIsRefreshing(true);
  };

  const handleEndReached = () => {
    // 맨 아래로 스크롤 했을 때 호출할 함수
  };

  return (
    <View>
      <FlastList
        data={data}
        renderItem={({ item }) => <RenderItem item={item} />}
        refreshing={isRefreshing}
        onRefresh={handleRefresh}
        onEndReached={handleEndReached}
        onEndReachedThreshold={number}
      />
    </View>
  )
};

 

❓ Props

 

   💡 data : 화면에 렌더링 할 데이터 배열 (목록)

 

   💡 renderItem : data 의 항목을 가져와서 목록으로 렌더링

      ❕ item : data 의 각 항목

 

   💡 horizontal : 항목을 나열하는 방법 (true인 경우 항목을 가로로 렌더링)

      ❕ default : false

 

   💡 onEndReached : 맨 아래까지 스크롤 된 경우 실행할 함수

 

   💡 onEndReachedThreshold : 목록의 가장 아래쪽에서 떨어진 정도

      ❕ ex) 0.5 : 목록의 절반 길이

 

   💡 onRefresh : 목록을 새로고침한 경우 실행할 함수 (맨 위에서 아래로 스크롤 하는 경우)

 

   💡 refreshing : 새로고침 여부 (true / false)

 

---

 

무한 스크롤의 경우 onEndReached에 데이터를 불러오는 함수를 입력해 주면 된다.

 

<자세한 내용은 expo 공식 홈페이지에서 확인할 수 있습니다.>

 

FlatList - Expo Documentation

 

---

 

내가 보려고 정리하는 리액트 네이티브🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview