리액트 네이티브에서 리스트를 구현하는 방법 - FlatList

리액트 JS에서 map 메소드를 이용해 배열에 각 컴포넌트를 담아 렌더링하는 것과 달리

리액트 네이티브에서는 FlatList를 이용해서 리액트 JS와 유사하게 리스트를 구현한다.

FlatList의 data 속성에 배열을 담고

keyExtractor에는 유니크한 key를,

renderItem에 렌더링될 컴포넌트를 넣는다.

map 메소드를 쓰는 것과 유사한 형태다.

 

import React from 'react';

import { FlatList } from 'react-native';

 

import ListItem from './listItem'

 

const messages = [

    { id: 1, message: 'hello' },

    { id: 2, message: 'bye' }

];

 

function App() {

    return (

        <FlatList

            data={messages}

            keyExtractor={message => message.id.toString()}

            renderItem={({ item }) => // item 말고 index, separators를 쓸 수 있다.

                <ListItem

                    message={item.message}

                />

            )}

            ItemSeparatorComponent={() => ( // item 사이의 간격을 주기 위한 속성

                <View style={{ width: '100%', height: 5 }} // 컴포넌트를 넣어준다.

            )}

        />

    );

}