[react-native] FlatList로 배열 데이터 나타내기

 이번에 react-native로 프로젝트를 하나 진행하게 되었다. 그래서 이제 react-native 공부 관련 글을 작성하려 한다.

 이번 앱에서 카톡 메시지함과 비슷한 것을 만들어야 했다.

 그래서 FlatList를 사용해서 배열로 저장된 데이터를 표시하는 기능이 필요했다.

 그 때 사용하고 공부한 내용을 작성해보자

 

---

FlatList는 많은 양의 리스트 아이템을 스크롤로 내리면서 보여주고자 할 때 사용한다.

 

ScrollView와 다른 점

ScrollView는 데이터가 화면을 벗어났을 때 단순히 Scroll을 만들어 벗어난 부분을 볼 수 있게 해 준다.

 

FlatList는 ScrollView와 같이 데이터가 화면을 벗어날 때 Scroll을 생성하지만 모든 데이터를 렌더링 하지 않고 화면에

나타나는 부분만 렌더링 한다.

 

 

---

FlatList 사용

 

FlastList 기본 요소로

• data : 만들고자 하는 리스트의 데이터가 들어간다.
• renderItem : data로 받은 데이터를 item에 각각 render 시켜준다.
• keyExtractor : 각 요소를 구별해준다. 유일해야 하고 생략이 가능하다.

수의 3가지가 있다.

 

예시 코드

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';

export default class Flat extends React.Component{
  constructor(props){
    super(props);
    
    this.state = {
      DATA :[
        {
          id:1,
          title: '1번'
        },
        {
          id:2,
          title: '2번'
        },
        {
          id:3,
          title: '3번'
        }
      ]
    }
  }

  renderItem = ({item}) =>{
    return (
      <View style ={styles.item}>
        <Text style = {styles.title}>{item.title}</Text>
      </View>
    )
  }

  render(){
    return(
      <SafeAreaView style = {styles.container}>
        <FlatList
          data= {this.state.DATA}
          renderItem = {this.renderItem}
          keyExtractor ={(item) => item.id}
        />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

결과:

스타일을 대충 넣었더니 이렇게 나오네요ㅎㅎ

 

아래의 공식문서에 더욱 자세하게 나와있습니다.

참고하여 공부하여 보세요

reactnative.dev/docs/flatlist

FlatList · React Native