React Native FlatList

React Native FlatList

• 자동으로 스크롤 생김
• scroll view 와 동일하게 동작
• 성능은 FlatList가 더 좋음
• 코드도 더 짧음

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

 

scrollView와 비교

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

 

keyExtractor

flatList data 가 key 가 이와 같이 정의되어 있다면 그냥 사용해도 무관

const [people, setPeople] = useState([
    {name:'aaa',key:'1'},
    {name:'bbb',key:'2'},
    {name:'ccc',key:'3'},
    {name:'ddd',key:'4'},
    {name:'eee',key:'5'},
    {name:'fff',key:'6'},
    {name:'ggg',key:'7'},
  ])

하지만

const [people, setPeople] = useState([
    {name:'aaa',id:'1'},
    {name:'bbb',id:'2'},
    {name:'ccc',id:'3'},
    {name:'ddd',id:'4'},
    {name:'eee',id:'5'},
    {name:'fff',id:'6'},
    {name:'ggg',id:'7'},
  ])

id로 정의되어 있다면 오류 발생

이를 해결하기 위해서는

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

 

numColumns 

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