7.8 Deleting To Dos (3)

강의

내가 삭제버튼을 누를때마다, 다른 id를 얻는걸 이제는 안다.

function deleteToDo(e){
    const li = e.target.parentElement;
    console.log(li.id); <----- 삭제 버튼을 누른 요소의 id를 출력해준다.
    li.remove();
}

지운다는것에 대한 내 생각

1. 배열에서 지우기

2. 로컬에서 지우기

   둘 중에 어떤걸 지워야 하는거지...???????????

   우선 저장하는 로직부터 생각을 해보면, 배열에 있는걸 로컬이 불러들여서 저장한다. 입력할때 엔터를 눌러 "제출"을 하게 되면 function handleToDoSubmit(event) 가 실행이 되고, 이 함수는 saveToDos();를 실행하게 되어 배열안에 있는 할일들을 string으로 바꾸어 로컬에 저장하게 된다.

• 할일을 "입력"할때는 배열이 알아서 로컬로 불려간다. 그렇지만, 배열에서 그냥 지우게 되면 내가 그냥 혼자 없앤거라서 다른 일이 벌어지지 않아서 로컬로 불려가지 않는다.

• 로컬에서만 지우면, 배열에는 그대로 남아있기 때문에 다음에 새로고침할때, 로컬에 다시 나타나게 된다.

  ===> 아니 그래서 결국 어째야 하는거임??????????

  정답은 굉장히 간단했음....허탈할 정도로....

배열에서 지워준 뒤에 배열이 로컬로 불려가는 함수 saveToDos( );를 실행해주면 되는 굉장히 간단한 문제였다..... 나는 지워주면 새로고침이 안되잖아 라고 생각했는데, 그냥 내가 새로고침을 해주면 되는거였음 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 나 아이큐 한자린가.....?

---

무튼 마지막 할 일은 id가 있는 todo를 지워주면 된다.

우리는 예전 array에는 실제로 작업하지 않는다. filter함수는 새 array를 준다.

콘솔창에서

const arr = [1,2,3,4]
arr.filter(item => item >2)  >>  [3, 4]
const newArr = a.filter(item => item >2)
arr >>  [1, 2, 3, 4]
newArr >> [3, 4]

arr.filter의 결과를 받는 newArr를 만들 수 있다. 보다시피 arr는 newArr를 실행하기 전과 똑같다. newArr는 arr.filter가 전달해준 값이다. filter는 이 array를 변경하지 않는다. 그리고 저번에 배운 arrow function( => )을 활용하여 함수를 굳이 선언하는 작업을 할 필요가 없다.

우리가 할 일은 삭제하고 싶은 id만 제외하고 array를 만드는거다. 그리고 toDos array를 업데이트 해준다!!

toDos = toDos.filter(toDo => li.id !== toDo.id);

콘솔창에서

toDos
> (4) [{...},{...},{...},{...}]
a를 지우고 다시 확인하면
toDos
> (4) [{...},{...},{...},{...}]

동일한 결과가 나온다.....? 배열에서 제외가 안됨!!!!!!!!! 뭐야!!!!!!!!!!

왜냐하면, 변수의 타입 때문이다!!
obj(배열)의 id는 숫자이다. (toDo.id) 그렇지만, li의 id를 console.log(typeof li.id); 확인해보면 string으로 나온다.
===> 단순히 변환해주면 되는 문제이다! 그렇지만, 항상 타입이 다를 수 있다는것을 인지하고 있어야한다.

자 우리는 배열에서 삭제시키고 싶은걸 제외한 다음에, saveToDos를 한 번 더 불러야 한다는 것을 잊지마라!! saveToDos();를 실행시켜야 로컬이 배열을 다시 불러들여 로컬에서도 삭제되어야 하기 때문이다.

function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}

saveToDos( ) : toDos의 배열을 문자로 바꾸어 로컬에 저장한다.

이제 문제없이 잘된다!!!!!!!!ㅠㅠ 드디어..!! இ௰இ இ௰இ இ௰இ இ௰இ இ௰இ இ௰இ

완성된 코드

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
// = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos"

let toDos =[];

function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}

function deleteToDo(e){
    const li = e.target.parentElement;
    li.remove();
    toDos = toDos.filter(toDo => parseInt(li.id) !== toDo.id);
    saveToDos();
}

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);
}

function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    const newTodoObj = {
        text : newToDo,
        id : Date.now(),
    }
    toDos.push(newTodoObj);
    paintToDo(newTodoObj);
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);


const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null){ //(savedToDos)
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}