React Native / FlatList Component

FlatList

많은 양의 데이터를 받아서 출력시,

React에서는 map 함수 / React Native 에서는 FlatList 사용

ScrollView 와 FlatList 의 차이

ScrollView : 데이터의 양이 적거나, 고정적일때 사용하기 좋음

스크롤 사용시 한번에 내리게 되면, 처리속도가 스크롤 속도를 따라가지 못해 흰색으로 화면이 로딩처리 되는 경우.

(한번의 렌더를 처리하기 때문)

FlatList : 데이터의 양이 많거나, 가변적인 경우, 예측할 수 없는 경우 사용하기에 적절함 ex. api를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우

데이터를 한번에 렌더링 하지 않고, 화면에 보여지거나 설정한 수만큼만 렌더링 함.

App.js

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';

export default function App() {
  const [people, setPeople] = useState([
    {name: 'shaun', id: '1'},
    {name: 'yoshi', id: '2'},
    {name: 'mario', id: '3'},
    {name: 'luigi', id: '4'},
    {name: 'peach', id: '5'},
    {name: 'toad', id: '6'},
    {name: 'bowser', id: '7'},

  ]);

  return (
    <View style={styles.container}>

        <FlatList 
          numColumns={2}
          keyExtractor={(item) => item.id}
          data={people}
          renderItem={({ item }) => (
            <Text style={styles.item}>{item.name}</Text>
          )}
        />

        {/* {people.map((item) => {
          return(
            <View key={item.key} >
              <Text style={styles.item}>{item.name}</Text>
            </View>
          )
        })} */}
    </View>
  );

  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 40,
    paddingHorizontal: 20
    // alignItems: 'center',
    // justifyContent: 'center',
  },
  item: {
    marginTop:24,
    padding:30,
    backgroundColor:'pink',
    fontSize: 24,
    marginHorizontal:10,
    marginTop:24,
  }
});

data : 데이터
renderItem : data의 각각 item을 렌더링 시키는 콜백함수
keyExtractor : ReactJS의 map 함수에서 key={index} 처럼 각 item의 고유키를 설정하는 것
ListHeaderComponent : 데이터 받아와서 출력한 곳 위에 제목처럼 보여줄 곳
numColumns : 괄호안의 숫자만큼 열로 만들어 줌