리스트 뷰 사용하기

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의 네트워킹에 대해 알아야 한다.