[RN공부하기] [6]Flat List Component

(1) FlatList 공식 문서 한번 읽어보기.

https://reactnative.dev/docs/flatlist

FlatList · React Native

FlatList는 많은 양의 스크롤이 필요한 리스트 아이템을 보여주고자 할 때 쓰이는 리액트네이티브 컴포넌트이다.
JS에서의 map 함수 역할과 비슷하나 더 많은 기능을 내포하고 있어 react-native에서 많이 쓰이는 컴포넌트이다.

ScrollView와 비교

RN에서 많은 양의 데이터를 출력 할 때 <ScrollView>와 함께 주로 사용되는데 사용용도에 차이점이 조금 있다.

<ScrollView>

• <ScrollView> 는 데이터가 화면에 벗어났을 때 단순히 Scroll을 생성하여 사용자와의 상호작용(swipe)을 통해 벗어난 부분을 볼 수 있게 해주는 데이 목적이 있다

출력해야 하는 데이터가 고정적이고 많지 않을 때 간단하게 사용할 수 있는 컴포넌트

<FlatList>

• 이에 반해<FlatList>는 더 많은 기능이 있다.ScrollView와 같이 데이터가 화면에 벗어났을 때도 Scroll을 생성하지만, 한 번에 모든 데이터를 렌더링하지 않고 화면에 보여지는 부분(혹은 설정한 수만큼의 데이터)만 렌더링한다는 차이가 있다.

그렇기에 데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우 (API를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우)에 사용하기 적절하다.

 

 

[Comment]
기본적으로 API로 게시글이나 여러 데이터 가져올때 FlatList 그냥 쓰면 될것 같다.

 

[기본적인 사용방법]

• FlatList를 사용하려면 두 가지 prop를 꼭 알아야 하는데 data와 renderItem이다.
• data는 만들고자 하는 리스트의 source를 담는 prop이다.
• renderItem은 data로 받은 소스들 그 각각의 item들을 render시켜주는 콜백함수이다.
• keyExtractor 는 ReactJS map함수에서 key={idex} 와 해줬듯이 각각의 item에 고유의 키를 주는 것이라 생각하면 된다. ex) keyExtractor={(item, index) => index.toString()}

 

(2) FlatList 추가하기

import { StyleSheet, Text, View, Button, TextInput, ScrollView, FlatList } from 'react-native';

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

• numColumns : 화면에 리스트 배치 할때 사용 현재 2개씩 화면에 나타남.
• keyExtractor : map함수의 key와 동일함.
• data : 리스트의 source를 담는 prop
• renderItem : data에 담겨져 있는것들을 렌더해주는 콜백함수.

결과)

 

 

 

[풀소스]

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

export default function App() {

  const [people, setPeople ] = useState([
    {name: "susan", key:'1' },
    {name: "yoshi", key:'2' },
    {name: "mario", key:'3' },
    {name: "luigi", key:'4' },
    {name: "peach", key:'5' },
    {name: "toad", key:'6' },
    {name: "bowser", key:'7' },
  ])
  return (
    <View style={styles.container}>
      <FlatList
        numColumns={2}
        keyExtractor={ (item)=> item.key}
        data={people}
        renderItem={ ( {item} ) => (
          <Text style={styles.item}>{item.name}</Text>
        )}
      >
      </FlatList>

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

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