RN docs - FlatList
Exploring the FlatList component in React Native
August 28, 2024
React Native는 데이터를 목록으로 표시하기 위한 다양한 컴포넌트를 제공합니다. 일반적으로 FlatList 또는 SectionList 중 하나를 사용하게 될 것입니다.
FlatList 컴포넌트는 유사한 구조의 변동 가능한 데이터를 스크롤 가능한 목록으로 표시합니다. FlatList는 항목의 수가 시간이 지남에 따라 변할 수 있는 긴 데이터 목록에 적합합니다. 보다 일반적인 ScrollView와 달리, FlatList는 화면에 현재 표시되고 있는 요소만 렌더링하며, 모든 요소를 한 번에 렌더링하지 않습니다.
FlatList 컴포넌트는 두 가지 props가 필요합니다: data와 renderItem. data는 목록의 데이터 소스입니다. renderItem은 소스에서 한 항목을 가져와 렌더링할 형식의 컴포넌트를 반환합니다.
이 예제는 하드코딩된 데이터를 사용하여 기본적인 FlatList를 생성합니다. data props의 각 항목은 Text 컴포넌트로 렌더링됩니다. 그런 다음 FlatListBasics 컴포넌트는 FlatList와 모든 Text 컴포넌트를 렌더링합니다.
데이터를 논리적인 섹션으로 나누어 표시하고 싶다면, 섹션 헤더와 함께 iOS의 UITableView와 유사한 방식으로 SectionList를 사용하는 것이 좋습니다.
리스트 뷰의 가장 일반적인 용도 중 하나는 서버에서 가져온 데이터를 표시하는 것입니다. 이를 위해서는 React Native에서 네트워킹에 대해 배워야 합니다.