React-native/Flat-List
FlatList는 map함수를 대신할 좋은 방법입니다.
많은 분들이 map을 사용하기보다는 FlatList컴포넌트를 활용합니다.
***map을 사용하게되면 ScrollView로 감싸줘야하지만 FlatList를 사용하면 ScrollView를 사용하지 않아도 됩니다.***
***FlatList를 사용하면 자동적으로 렌더링 최적화가 됩니다. 데이터가 너무 많을 때에는 한꺼번에 불러오는 것이 아닌 성능에 문제없을 만큼의 데이터를 조금씩 가져옵니다. ***
<FlatList
data={people}
renderItem={({item}) => <Text style={styles.item}>{item.name}</Text>}
/>
FlatList 컴포넌트는 data Prop으로 데이터를 받아오고 renderItem으로 출력 형식을 지정해줍니다.
{ ( { item } )=> {...} }
이 부분이 좀 복잡해보이는데 가장 밖에있는 { }는 jsx의 것이고,
( )는익명함수의 것이고
가장 안쪽의 { }는 해체할당 문법입니다.
jsx에 익명함수를 등록하는데 그 인자를 해체할당으로 data Prop으로 부터 받아오는 것입니다.
음... 이해되셨을지 모르겠습니다. data가 renderItem에게 객체를 넘겨주고 그것을 해체할당으로 받는다고 이해하시면 되겠습니다.
그리고 다음 이야기로 FlatList는 기본적으로, 명시하지 않아도 받은 데이터로부터 key 프로퍼티 찾아서 각 리스트항목에 적용시켜 줍니다.
근데 만약 우리가 가진 데이터가
[{name: '리액트', key: '1'}] 이런 형식이 아닌 [{name: '리액트', id: '1'}]
이렇게 가지고 있다면 어떨까요?
그때에는 keyExtractor Prop을 사용하시면 됩니다.
<FlatList
data={people}
renderItem={({item}) => <Text style={styles.item}>{item.name}</Text>}
keyExtractor={item => item.id}
/>
마지막
그리고 numColumns={2} 도 Prop으로 넣어보세요~