🧩 Expo로 Today's ToDoList 만들기(4)- 삭제기능 구현

이전 포스팅인 '추가기능 구현'에 비해서 삭제기능은 비교적 코드양이 많지 않다.
상태관리에 대한 내용까지 들어가다 보니 추가기능에 대한 글이 길었지만,
바탕이 다 잡혀있는 상황에서 삭제기능은 정말 손쉬웠다.

할 일 삭제 기능🗑

기존 예제들에 나와있는, 휴지통 모양의 아이콘 버튼을 클릭해서 삭제하는 기능 말고
나는 조금 독특하게 Swipeable 라이브러리를 설치해서 사용하기로 했다.
아이폰에 많이 있는 기능인데, 어떤 한방향으로 밀어서 숨어있는 기능이 나타날 수 있도록
효과?를 주는 것 같았다.
그래서 나는 삭제기능을, 목록 오른쪽에서 나타나게 하도록 만들기로 했다.

우선 App.js에서 onRemove라는 함수를 생성한 후 <TodoList>컴포넌트에 전달한다.

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

이는 각 아이템의 고유 id를 받아서 해당 아이디를 가진 아이템을 제외한 새로운 배열을 만드는 함수다.
이후 TodoList.js에서 onRemove 함수를 받아 <TodoListItem>컴포넌트에 전달한다.

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

TodoListItem.js에서는 전체 코드를 <Swipeable>컴포넌트로 감싼 후
삭제 버튼을 위한 <DeleteButton>컴포넌트를 생성하고
renderRightActions를 사용해서 만든 <DeleteButton>컴포넌트에서
onPress이벤트에 onRemove 함수를 할당하면 된다.

export default function TodoListItem({title, id, checked, onRemove}) {
  const DeleteButton = ({onPress}) => {
    return (
      <TouchableOpacity activeOpacity={0.8} onPress={onPress}>
        <DeleteText>삭제</DeleteText>
      </TouchableOpacity>
    );
  };
  return (
    <Swipeable
    renderRightActions={()=> <DeleteButton onPress={onRemove(id)} />}>
    ...
    </Swipeable>