[TIL] REACTNATIVE - FLATLIST

DAY 53 <FLATLIST>

FlatList 와 ScrollView는 비슷하지만 다르다.

ScrollView는 scroll을 내려서 화면에서 벗어난 데이터를 볼 수 있게 해주고
FlatList는 많은 양의 데이터를 한번에 렌더링하지 않고 화면에 나타나는 부분만 렌더링 한다.

FlatList 안에는 data, renderItem, keyExtractor 요소가 포함된다.
data: 리스트의 데이터
renterItem: data로 받은 데이터를 item 에 render 시켜준다.
keyExtractor: 각 요소를 구별해준다.

공식문서에 나와있는 예시

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

이번 프로젝트에서도 scrollview로 만들었던 scroll 화면을 Flatlist로 만들어보기로했다.