React-Native Tutorial To do list [ #14 ]
React Native Tutorial 따라하기 📱
📌 튜토리얼을 따라한 프로젝트입니다!
할 일 목록 삭제하기
할 일 목록 삭제 함수 생성하기
app.js 파일에서 onRemove
함수를 생성합시다.
const onRemove = id => e => {
setTodos(todos.filter(todo => todo.id !== id));
};
설명
이 함수에서도 setTodos를 사용하여 상태를 업데이트 해줍니다. 각 아이템의 고유 id를 받아와서 해당 아이디를 가진 아이템 객체만 제외하고 새로운 배열을 만드는 함수 입니다.
생성한 함수를 TodoList 컴포넌트에 전달하기
<TodoList todos={todos} onRemove={onRemove} />
TodoList 컴포넌트에서 onRemove 함수를 받아 TodoListItem 컴포넌트에 전달하기
const TodoList = ({todos, onRemove}) => {
return (
<ScrollView contentContainerStyle={styles.listContainer}>
{todos.map(todo => (
<TodoListItem key={todo.id} {...todo} onRemove={onRemove} />
))}
</ScrollView>
);
};
TodoListItem 컴포넌트에서 삭제 버튼에 onPress 이벤트를 생성하고 onRemove() 함수를 할당하기
const TodoListItem = ({textValue, id, checked, onRemove}) => {
return (
<View style={styles.container}>
...
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.buttonText} onPress={onRemove(id)}>
<Icon name="delete" size={30} color="#e33057" />
</Text>
</TouchableOpacity>
</View>
);
};
결과보기
Author And Source
이 문제에 관하여(React-Native Tutorial To do list [ #14 ]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zopall0000/React-Native-Tutorial-To-do-list-14저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)