리스트뷰 사용하기

React Native는 데이터 목록을 표시하기 위한 다양한 컴포넌트를 제공한다. 일반적으로 FlatList나 SectionList를 사용한다.

FlatList 컴포넌트는 구조가 유사하지만 변화하는 데이터의 스크롤 가능한 목록을 표시한다. FlatList는 항목 수가 시간에 따라 변할 수 있는 긴 데이터 목록에 적합하다. 일반적인 ScrollView와 달리, FlatList는 현재 화면에 보이는 엘리먼트만 렌더링하며 모든 엘리먼트를 한 번에 렌더링하지 않는다.

FlatList 컴포넌트는 data와 renderItem 두 가지 props를 필요로 한다. data는 목록의 정보 소스이며, renderItem은 소스에서 하나의 항목을 가져와 포맷된 컴포넌트를 반환한다.

이 예제는 하드코딩된 데이터로 기본 FlatList를 생성한다. data props의 각 항목은 Text 컴포넌트로 렌더링된다. FlatListBasics 컴포넌트는 FlatList와 모든 Text 컴포넌트를 렌더링한다.

데이터를 논리적인 섹션으로 나누어 표시하고 싶다면, iOS의 UITableView와 유사한 SectionList를 사용한다.

리스트 뷰의 가장 일반적인 용도는 서버에서 가져온 데이터를 표시하는 것이다. 이를 위해서는 React Native에서 네트워킹에 대해 배워야 한다.