[React-Native] FlatList

FlatList 💡

FlatList는 React-Native에서 ScrollView와 비슷하게 화면에 벗어난 데이터를 보여줄 때

사용한다. React를 공부하면서 map을 사용해 리스트들을 화면에 랜더링하는 것을 컴포넌트에서

설정으로 간단하게 구현할 수 있다고 보면 되지 않을까 싶다. ScrollView는 단순히 데이터가 화면

에서 벗어났을때 그 부분을 보여주는 용도라면 FlatList에는 그 용도 외 다양한 기능들이 있다.

FlatList는 한번에 데이터를 랜더링 하지 않고 화면에 보여지는 부분만 랜더링 할 수 있다.

API를 통해 외부에서 크기를 알수 없는 데이터를 가져 오는 경우와 같이 가변적인 상황에 적절하게

사용할 수 있다. 초기 화면에 설정된 양만큼의 데이터를 랜더링 한 뒤, 사용자와의 상호작용에 따라

스크롤을 내릴때 필요한 부분을 추가로 랜더링 하기 때문에 성능을 향상시킬 수 있다.

기본적인 사용 방법

(...)
const data = [
  {
    id: 'a',
    title: 'First',
  },
  {
    id: 'b',
    title: 'Second',
  },
  {
    id: 'c',
    title: 'Third',
  },
];
const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);
const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}
(...)
 // 혹은 
 renderItem={({item}) => <Item title={item.title} />} // 요렇게 사용해도 된다.