react native FlatList 사용하여 개발하기

react native 많은 량의 데이터 리스트를 출력할때 ScrollView 나 FlatList 를 주로 사용합니다.

두 컴포넌트 모두 데이터가 화면을 벗어났을 시에 Scroll이 생성된다는 공통점이 있지만 사용 용도에는 조금 차이가 있습니다.

ScrollView 란?

데이터가 화면을 벗어났을시에 단순히 Scroll을 생성하여 벗어난 부분을 볼 수 있게 해주는 데에 그 목적이 있습니다.

출력해야하는 데이터가 고정적이며 데이터양이 많지 않을 때 사용이 권장되는 컴포넌트입니다.

FlatList 란?

FlatList 는 한번에 모든 데이터를 렌더링하지 않고

화면에 보여지는 부분(혹은 설정한 수만큼의 데이터)만 렌더링합니다.

데이터의 길이가 가변적이며 데이터의 양이 많을시에 사용이 권장되는 컴포넌트입니다.

ex) 사용예제

import React from 'react';
import {ScrollView, FlatList} from 'react-native';
import Item from './Item';

// 50까지 숫자를 만들어주는 코드 ( 데이터 ) 
const arr = [];
for (let i = 0; i < 50; i++) {
 arr.push(i);
}

const App = () => {
 return (
   <FlatList
     keyExtractor={item => item.toString()}
     data={arr}
     renderItem={({item}) => <Item num={item} />}
   />
 );
};

export default App;

※ keyExtractor를 통해 각 요소를 구별해줍니다.

요소가 객체이고 key나 id를 이름으로하는 property가 존재하면(유니크해야합니다) 생략가능합니다.

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

const Item = ({num}) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>{num}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderBottomWidth: 1,
    height: 100,
  },
  text: {
    textAlign: 'center',
    textAlignVertical: 'center',
    fontSize: 50,
  },
});

export default Item;

참고자료
https://codingbroker.tistory.com/110