기존의 문제점 : a,b,c,d,a 가 DB에 저장되어있으면
a를 삭제할때 어떤 a가 삭제되는지 모른다
-> 그렇기에 각 array의 item에 id를 부여해서 고유의 정체성? 을 갖게한다!
id값은 우리에게 랜덤한 숫자를 주는 Date.now(); 함수를 이용해서 부여한다.
const newToDoObj = {
text:newTodo,
id:Date.now(),
};
이렇게 설정하고 난 뒤 기존 text만 보내던
toDos.push(newToDo); 에서 toDos.push(newToDoObj);로 수정해야한다!
function paintToDo(newTodo) {
const li = document.createElement("li");
li.id = newTodo.id;
const span = document.createElement("span");
span.innerText = newTodo.text;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
paintToDo(newTodo)에서 newTodo는 받는 인자의 형태일 뿐 실제 string 형태의 newTodo가 아니다. 실제로는 newTodoObj를 받는 것이므로 객체의 형태이다. 그래서
li.id = newTodo.id;
span.innerText = newTodo.text;
위에서 newTodoObj를 쓰는것이 아니라 newTodo를 쓰는 것이다.
