4.5.2 항목 삭제 함수 만들기

이제 App 컴포넌트에서 항목을 삭제하는 함수 onRemove를 선언해 이를 TodoList 컴포넌트의 Props로 설정해줍시다. 이 함수는 onToggle처럼 항목의 id 값을 파라미터로 받아옵니다.

App.js

(...)
function App() {
  (...)

  const onRemove = id => {
    const nextTodos = todos.filter(todo => todo.id !== id);
    setTodos(nextTodos);
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView edges={['bottom']} style={styles.block}>
        <KeyboardAvoidingView
          behavior={Platform.select({ios: 'padding'})}
          style={styles.avoid}>
          <DateHead date={today} />
          {todos.length === 0 ? (
            <Empty />
          ) : (
            <TodoList todos={todos} onToggle={onToggle} onRemove={onRemove} />
          )}
          <AddTodo onInsert={onInsert} />
        </KeyboardAvoidingView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

(...)