FlatList

FlatList

• 배열을 갖다가 스크롤이 가능하게 렌더링을 하려면, 주로 스크롤뷰를 사용한다.

• 하지만, 스크롤뷰는 특정한 경우에 성능 이슈가 생기곤 한다.

• 모든 요소를 렌더링하기 때문에, 아직 화면에 보이지 않는 요소들까지 렌더링한다.
  ㄴ 이것은 비효율적이고, 성능적인 문제를 야기한다.
  

• 때문에 요소가 매우 많고, 일부 요소가 화면에 아직 보이지 않는다면 플랫리스트를 활용하자.

• 다음은 RN 공식 문서에서 이야기하는 플랫리스트의 특징이다.

1. 크로스플랫폼을 완전히 지원하고,
2. header, footer, separator를 지원한다.
3. 당겨서 리프레시를 지원한다.
4. 스크롤 시 items 로딩을 지원한다.
5. scrollToIndex를 지원한다.
6. Multiple column 을 지원한다.

Code

import React from 'react';
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
} from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item = ({title}) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({item}) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Props

[required]

• data : 렌더링할 배열
• renderItem : 렌더링 아이템 한개에 대한 정의
• KeyExtractor : 키 정의

[option]

• ItemSeparatorComponent
  맨 위와 맨 아래를 제외하고, 아이템 사이의 요소를 정의한다.

• ListEmptyComponent
  리스트가 비어있을 때의 렌더링 요소를 정의

• ListFooterComponent ( 스타일링은 ListFooterComponentStyle )
  리스트 맨 아래의 요소를 정의

• ListHeaderComponent ( 스타일링은 ListHeaderComponentStyle )
  리스트 맨 위의 요소를 정의

• inverted
  스크롤의 방향을 전환한다.

• OnRefresh

() => void;

리스레쉬 시의 동작을 정의한다.

Methods

• flashScrollIndicators() : 잠깐 동안 스크롤 바를 보여준다.

flashScrollIndicators()

• getNativeScrollRef()

• getScrollResponder()

• getScrollableNode()

• scrollToEnd()
  맨 마지막 요소로 스크롤 해준다.

• scrollToIndex()
  특정 인덱스로 스크롤한다.

scrollToIndex : (params : {
	index : number;
    animated? : boolean;
    viewOffset?: number;
    viewPosition? : number;
});

viewPosition이 0이면 맨 위 , 1이면 맨 아래 0.5면 중간을 보여준다.

성능에 영향을 미치는 Props

removeClippedSubViews

maxToRenderPerBatch

updateCellsBatchingPeriod

initialNumToRender

windowSize