바닐라 JS로 크롬 앱 만들기 #7.7~#7.8

#7.7 Deleting To Dos part Two

 

Delete 하기 위해 paintToDo를 제대로 이해하자. 

 

const numbers = [{text:"1", id:123345}, {text:"2", id:152242}]
function niceFilter () {true}

numbers.filter(niceFilter)

 

filter함수로 array에서 원하지 않는 object를 제외한다.

만약 해당 함수의 값이 true라면 filter함수를 통해 출력된다. 

만약 해당 함수의 값이 false라면 filter함수를 통해 출력되지 않고 제외된다. 

 

이렇게 되면 출력값은 아래와 같다.

0: {text:"1", id:123345}
1: {text:"2", id:152242}

function niceFilter가 true이므로 

numbers.filter(niceFiter)는 모든 array값을 새로이 출력한다. 

 

#7.8 Deleting To Dos part Three

 

filter function은 원래 가지고 있던 array값을 가져오지 않는다. 

새로운 array를 주는 것이다. 

 

const arr = [1, 2, 3, 4]

const newArr = arr.filter(item => item > 2)

arr

출력값은 [1, 2, 3, 4]

 

그러므로 deleteToDo 함수에 삭제한 것을 빼는 기능을 넣고 싶으므로  

 

    ToDos = ToDos.filter(ToDo => ToDo.id !== li.id);

함수를 추가해 준다. 그러면 ToDos에는 li.id가 아닌 것만 추가가 된다. 

그런데 문제는 li.id의 타입을 보면 string이다. 

console.log(typeof li.id)하면 알 수 있다. 

 

그러므로 li.id의 타입을 바꿔주기 위해 parseInt 함수를 쓴다. 

 

    ToDos = ToDos.filter(ToDo => ToDo.id !== parseInt(li.id));

그 다음에 

savedToDos를 다시 호출해 줘야 한다. 

 

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove(); 
    ToDos = ToDos.filter(ToDo => ToDo.id !== parseInt(li.id));
    savedToDos();
}

수정 완성 된 함수.

이제 원하는 대로 local storage에 저장되어 있는 것을 화면에서 삭제를 누른다면 삭제가 된다.