이 컴포넌트에서는 id, text, done 값을 Props로 받아옵니다. 지금 당장은 id를 사용하지 않지만 추후 업데이트/삭제를 구현할 때 해당 값이 필요합니다. 또한, done 값에 따라 완료됐을 때는 다른 뷰를 보여줘야 하는데, 이 부분은 잠시 후 구현하겠습니다.

방금 만든 컴포넌트를 TodoList에서 불러와 renderItem 부분에서 사용해보세요.

components/TodoList.js

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

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

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

export default TodoList;