바닐라 JS로 크롬 앱 만들기 [6-6] Deleting ToDos

---

• 리스트를 삭제해도 localStorage에 그대로 남아있기 때문에 새로고침하면 다시 리스트가 나타나는 문제 발생
• local storage → 데이터베이스를 복사해두는 곳

1. 각 항목에 id 추가

function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";

    const newToDoObj = {
        text : newToDo,
        id : Date.now()
    };
    toDos.push(newToDoObj); // *

    paintToDo(newToDo) 
    saveToDos();
}

• id를 사용하는 이유 : 각 항목을 구별하기 위해서
• [Date.now] : 현재 시각
• id를 사용하려면 HTML에 둬야 사용 가능 → paintToDo에 문자가 아닌 id를 포함한 object 주기

    paintToDo(newToDoObj); 

• paintToDo에 newToDoObj 넣으면 오류 발생
• 오류 내용 : 리스트가 [object object] 라고 출력

해결 전(오류 발생)

function paintToDo(newToDo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newToDo // *
    const button = document.createElement("button")
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

paintToDo는 이제 text가 아닌 object를 받기 때문에 수정 필요

해결 후

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

• span.innerText = newToDo → span.innerText = newToDo.text
• 각 리스트에 id를 추가하기 위해서 li.id = newToDo.id; 추가

---

2. array에서 item 지우기

.filter : 지우고 싶은 item을 제외하고 새 array 만들기

중요 : filter 함수는 기존 배열을 바꾸는 것이 아니라 새로운 배열을 만들어 준다.

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

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

---

.filter 기초

function sexyFilter() {

}

[1, 2, 3, 4].filter(sexyFilter)

• sexyFilter 함수는 새 array에서 object를 유지하고 싶으면 true를 리턴해야 함
• false 리턴 시 그 항목은 새 array에 포함되지 않음

순서

1. filter 함수가 sexyFilter 호출
2. 1, 2, 3,4에 sexyFilter 가 차례대로 실행

.filter 예시

function sexyFilter(){return true}

[1, 2, 3, 4, 5].filter(sexyFilter)
// (5) [1, 2, 3, 4, 5]

function sexyFilter(){return false}

[1, 2, 3, 4, 5].filter(sexyFilter)
// []

true를 반환하는 경우 모든 항목이 살아있고, false를 반환하는 경우 항목이 다 제외됨

3이 아니면 true를 반환하는 함수

function sexyFilter(item){return item !== 3}

[1, 2, 3, 4, 5].filter(sexyFilter)
// (4) [1, 2, 4, 5]

활용

콜라 제외

const abc = ["pizza", "chicken", "coke"]
function sexyFilter(food){return food !== "coke"}
abc.filter(sexyFilter)
// (2) ['pizza', 'chicken']

1000보다 큰 수 제외

const num = [1234, 5678, 90, 342, 214, 1587]
function numFilter(number) { return number <= 1000}
num.filter(numFilter)
// (3) [90, 342, 214]

투두리스트 활용 예시

const todos = [{"text":"a","id":1705233889716},{"text":"b","id":1705233890382},{"text":"c","id":1705233890783},{"text":"d","id":1705233891309}]

function sexyFilter(todo){ return todo.id !== 1705233889716}

todos.filter(sexyFilter)

결과 : [{{text: 'b', id: 1705233890382}}, {{text: 'c', id: 1705233890783}}, {{text: 'd', id: 1705233891309}}]

3. 리스트 삭제

변경 전

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

변경 후

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

• 문제점 : li.id → string, [toDo.id](http://toDo.id) → number / 형태가 달라서 지워지지 않음
• 원인 : document 값으로 들어올 때 문자열로 변환(추가 검색 필요)

문제 해결

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

• parseInt 사용하여 숫자로 변환
• saveToDos 로 변경사항 저장