4.2.2 TodoList 컴포넌트 만들기

TodoList 컴포넌트를 만들고 해당 컴포넌트 내부에 FlatList를 사용해 여러 항목을 보여주겠습니다. components 디렉터리에 TodoList.js 파일을 생성해 다음과 같이 코드를 작성하세요.

components/TodoList.js

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

function TodoList({todos}) {
  return (
    <FlatList
       style={styles.list}
       data={todos}
       renderItem={({item}) => (
         <View>
           <Text>{item.text}</Text>
         </View>
       )}
       keyExtractor={item => item.id.toString()}
      />
   );
}

const styles = StyleSheet.create({
  list: {
    flex: 1,
  },
});

export default TodoList;