[React Native] 리스트 표시하기(FlatList, SectionList) 사용법

react natvie는 데이터를 리스트 형태로 표시하기 위한 여러 컴포넌트를 제공합니다. 일반적으로 FlatList 또는 SectionList를 사용하게 됩니다.

FlatList 컴포넌트는 유사한 구조의 데이터가 변동하는 스크롤 목록을 표시합니다. FlastList는 항목의 수가 시간에 따라 변할 수 있는 긴 목록의 데이터를 처리하는 데 적합합니다. 일반적인 ScrollView와 달리 FlatList는 화면에 현재 표시되는 요소들만 렌더링하며, 한 번에 모든 요소를 렌더링하지 않습니다. FlastList 컴포넌트는 두 가지 props가 필요합니다. data와 renderItem입니다. data는 리스트의 정보 소스입니다. renderItem은 소스에서 하나의 항목을 가져와 렌더링할 포맷된 컴포넌트를 반환합니다. 다음 예제는 하드코딩된 데이터로 기본적인 FlatList를 생성합니다. data props의 각 항목은 Text 컴포넌트로 렌더링됩니다. FlatListBasics 컴포넌트는 FlatList와 모든 Text 컴포넌트를 렌더링합니다.

import React from "react";
import { StyleSheet, FlatList, Text, View } from "react-native";

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44
    }
})

const data = [
    {key: 'Devin'},
    {key: 'Dan'},
    {key: 'Dominic'},
    {key: 'Jackson'},
    {key: 'James'},
    {key: 'Joel'},
    {key: 'John'},
    {key: 'Jillian'},
    {key: 'Jimmy'},
    {key: 'Julie'},
]

const FlatListBasics = () => {
    return (
        <View>
            <FlatList
                data={data}
                renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
            />
        </View>
    )
}

export default FlatListBasics

데이터를 논리적인 섹션으로 나누어 섹션 헤더와 함께 표시하고 싶다면 iOS의 UITableViews와 유사하게 SectionList를 사용하는 것이 좋습니다.

import React from "react";
import { StyleSheet, SectionList, Text, View } from "react-native";

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44
    }
})

const data = [
    {
        title: 'D', 
        data: ['Devin', 'Dan', 'Dominic']
    },
    {
        title: 'J',
        data: [
            'Jackson',
            'James',
            'Jillian',
            'Jimmy',
            'Joel',
            'John',
            'Julie',
        ],
    }
]

const SectionListBasics = () => {
    return (
        <View>
            <SectionList
                sections={data}
                renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
                renderSectionHeader={({section}) => (<Text style={styles.sectionHeader}>{section.title}</Text>)}
                keyExtractor={item => `basicListEntry-${item}`}
            />
        </View>
    )
}

export default SectionListBasics