[Expo-TodoList] 할 일 목록 삭제

할 일 목록 삭제 기능

할 일 목록을 삭제할 수 있는 onRemove 함수를 만든다.

#1 onRemove 함수 만들기

App.js

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

setTodos를 사용하여 상태를 업데이트 해주고,
각 아이템의 고유 id를 받아와서
해당 id를 가진 아이템 객체만 제외하고 새로운 배열을 만드는 함수다.

#2 onRemove 함수 전달하기

#2-1
TodoList 컴포넌트에 onRemove 함수를 전달해주자.

App.js

<TodoList todos={todos} onRemove={onRemove} />

#2-2
TodoList 컴포넌트에서 onRemove 함수를 받아와서
TodoListItem 컴포넌트에 전달해주자.

TodoList.js

export default function TodoList({todos, onRemove}) {
  return (
    <Container>
      {todos.map(todo => (
        <TodoListItem key={todo.id} {...todo} onRemove={onRemove}/>
      ))}
    </Container>
  );
}

#2-3
TodoListItem 컴포넌트에서
스타일링한 DeletBtn에 onPress 이벤트를 생성하고,
onRemove()함수를 할당해주자.

TodoListItem.js

<DeleteBtn>
 <Text onPress={onRemove(id)}>
   <AntDesign name="minuscircleo" size={35} color="#ff7272" />
 </Text>
</DeleteBtn>

이제 삭제 버튼의 기능이 잘 작동되는 것을 확인 할 수 있다.