react Native

투두리스트 기본적인 UI를 짜고 기능을 추가해보았다 .

 

첫 번째 추가 기능 구현

const [todos, setTodos] = useState([]);

const [text, setText] = useState();

 

const newTodo = {

id: Date.now(),

 

isEdit: false,

 

text,

isDone: false,

 

category,

 

};

const addTodo = () => {

 

setTodos((prev) => {

 

return [...prev, newTodo];

 

});

 

setText("");

 

};

추가될  newTodo라는 새로운 객체를 만든다

 

만든 후 addTodo 변수를 만들어 setTodo를 이용하요 기존에 있던 todos 에 넣는다 

 

setText 는 입력후 - 인풋창을 비워준다!

const deleteTodo = (id) => {

Alert.alert("Todo 삭제", "정말 삭제하시겠습니까?", [

 

{

 

text: "취소",

 

style: "cancel",

 

onPress: () => console.log("취소 클릭!"),

 

},

 

{

test: "삭제",

 

style: "destructive",

 

onPress: () => {

 

const newTodos = todos.filter((todo) => todo.id !== id);

 

setTodos(newTodos);

 

},

 

},

 

]);

 

};

 

id 값을 받아와 필터를 이용하여 newTodos 의  id 값과 선택한 아이디 값을 제외한 나머지를 출력하게 만들어 화면에 todos를 리턴한다.

기존 alert 와 달리 리액트 네이티브에서는  Alert.alert("Todo 삭제", "정말 삭제하시겠습니까?", [

 

{

 

text: "취소",

이런 형식으로 쓰이고 있다 .

 

추가와 삭제기능 까지 구현했는데  아직은 익숙하지 않아 어렵긴 하다.