[Today I Learned] 1월 1주차 day5

FlatList

scrollView 는 모든 리스트들을 한번에 렌더링 해야해서 리스트가 많을수록 성능이 저하된다.
반면 FlatList 는 화면에 보이지 않는 리스트들은 메모리에서 제거하고 보이는 부분만 렌더링을 하여 성능저하를 최소화 시킨다.

리스트가 많거나 무한스크롤(infinite scroll)을 적용하고 싶으면 FlatList를 사용해야한다.

사용법

• FlatList를 사용하려면 세 가지 prop를 꼭 알아야 하는데 data 와 renderItem, keyExtractor 이다.

• data는 만들고자 하는 리스트의 데이터를 담는 prop이다.

• renderItem은 data로 받은 소스들 그 각각의 item들을 render시켜주는 콜백함수이다.

• keyExtractor 는 ReactJS map함수에서 key={idex} 와 해줬듯이 각각의 item에 고유의 키를 주는 것이라 생각하면 된다.

아래는 기본 사용법이다.

const renderItem = ({ item }) => {
  return (
    <View>
      <View>
        <Text>user id: {item.userId}</Text>
      </View>
      <View>
        <Text>id: {item.id}</Text>
      </View>
      <View>
        <Text>title: {item.title}</Text>
      </View>
      <View>
        <Text>body: {item.body}</Text>
      </View>
    </View>
  );
};


export default function App() {
  const [data, setData] = useState([]);
  const [offset, setOffset] = useState(0);
  const [loading, setLoading] = useState(false);
  
   return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => String(item.id)}
      />
    </SafeAreaView>
  );
}

[참고자료]

FlatList 블로그 참고1
FlatList 블로그 참고2
FlatList 공식문서