FlatList

 

- FlatList : 다양한 기능들을 가지고 있는 기본적인 List Component

 

ex)

            <FlatList
                style={styles.notiFlatList}
                data={data}
                renderItem={renderItem}
                onRefresh={onRefresh}
                refreshing={isRefreshing}
                keyExtractor={item => `${item.notiId}`}
                onEndReached={onDataFetch}
                onEndReachedThreshold={0.6}
                ListFooterComponent={renderListFooterComponent}
                ListEmptyComponent={() => <NotiSkeleton />}
            />

 

- 주요 속성 

- data : List로 표현할 data

- renderItem : data의 item을 어떤 형태로 render 할 것인지 설정

- onRefresh : refresh (list를 위에서 아래로 당겼을 때) 했을 때 실행시킬 함수를 설정

- refreshing : 새로운 data를 기다리는 동안 true

- keyExtractor : list item에 고유 key 값을 부여하며, caching에 사용

- onEndReached : scroll 위치가 onEndReachedThreshold 범위에 들어오면 함수를 실행 (무한 스크롤)

- onEndReachedThreshold : scroll 위치를 설정, default는 1이며 1로 가까워질수록 FlatList 가장 하단, 0.5면 FlatList의  중간 지점

- ListFooterComponent : 맨 아래에 rendering 할 요소 (무한 스크롤 시 데이터가 마지막이면 데이터가 마지막이라고 표시 해주는 용도로 사용 가능)

- ListEmptyComponent : List가 비어 있을 때 rendering (로딩 시 스켈레톤을 넣을 때 사용 가능)

 

 

 

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