React Native - Flat List

Flat List의 특징 생략

개념 필요할 경우 이거 참고

https://velog.io/@jhkim040/ScrollView-List-Views

---

App.js

import { StyleSheet, Text, View, FlatList } from "react-native";
import React, { useState } from "react";

export default function App() {
  const [people, setPeople] = useState([
    { name: "A", id: "1" },
    { name: "B", id: "2" },
    { name: "C", id: "3" },
    { name: "D", id: "4" },
    { name: "E", id: "5" },
    { name: "F", id: "6" },
    { name: "G", id: "7" },
    { name: "H", id: "8" },
    { name: "I", id: "9" },
    { name: "J", id: "10" },
    { name: "K", id: "11" },
    { name: "L", id: "12" },
    { name: "M", id: "13" },
    { name: "N", id: "14" },
  ]);
  /* 
    keyExtractor )
    각 객체에 key 속성이 있으면 
    그것을 자동으로 key로 사용하지만
    실제로 DB에서 받아오는 data는 
    다른 속성이 key 역할을 할 때가 많음
    ex) id
    그럴 때 keyExtractor에 key로 사용할 속성을 함수로 정의

    numColumns )
    FlatList로 화면에 배치할 데이터의 열의 개수 지정
    (크기에 맞게 열의 개수를 설정하지 않으면 렌더링 에러가 뜨는 듯...)

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

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

---

실행화면

---

참고 : https://www.youtube.com/watch?v=iMCM1NceGJY&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ&index=7