filter

지난번엔 리스트를 만들어 문자 타입을 스트링으로 바꿔주고, 스트링을 다시 자바에서 활용가능한 오브젝트로 변환하는 과정을 배웠다.

이번 시간에는 array 내에 있는 string이 object로 바뀐 후,
foreach가 적용된 상태에서, localstorage에 있는 데이터를 직접 삭제하는 작업을 진행했다.

먼저 해당 작업을 진행하기 전,

input에 입력된 newToDo를 toDos에 push하기 이전에 오브젝트를 만들어 텍스트와 아이디 값을 다음처럼 붙여주자.

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

해당 식에서 원래 하단에 toDos.push의 arg는 newToDo였지만,
위에서 새롭게 정의한 newToDoObj를 받아야 하는데, 이때 들어오는 값은 오브젝트다. 따라서
상단에 위치한 다른 펑션을 수정하지 않으면 오류가 난다.

이를 고치기 위해, 핸들 서브밑 펑션의 영향을 받는 다른 펑션을 수정하러가야한다

<script>
function paintToDo(newToDo) {
    const list = document.createElement("li");
    list.id = newToDo.id;
    const span = document.createElement("span");
    span.innerText = newToDo.text;
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo)
    list.appendChild(span);
    list.appendChild(button);
    toDoList.appendChild(list);
}
</script>

상단에 위치한 newToDo를 arg로 받기에 하단에 있는 list.id = newToDo.id; 를 추가하고
스팬태그의 이너텍스트도.text로 바꿔줘야한다. 그래야 제대로된 값이 화면에 출력된다.

이렇게 설정해두면 이제 다음과 같은 화면을 볼 수 있다.

해당 항목에서 입력과 동시에 인스펙트 어플리케이션에 다음과 같이 등장한다

이렇게 만들어진 태그를 활용하면 각 리스트 버튼 클릭을 감지해 로컬 데이터상에서도 삭제하는 방법을 찾을 수 있을 듯 하다.

기존에 있는 array값을 직접 건드리기보다, 건드려진 항목을 제외하고 새로운 array를 만드는 방법을 추천받았다.

즉 filter 를 사용하면 되는 것이다.

filter의 사용방법은 다음과 같다.

<script>
const numbers = [1, 2, 3, 4, 5]; 
const result = numbers.filter(number => number > 3); 

console.log(numbers); 
// [1, 2, 3, 4, 5]; 

console.log(result); 
// [4, 5]
</script>

이를 바탕으로 해당 deleteli 펑션을 살펴보자

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

이 코드를 적용하면 로컬 스토리지에 모인 array가 선택된 li를 제외하고 다시 만들어지기 때문에
성공적으로 화면에서 리스트를 삭제할 수 있다.

코드를 이해해보자면,
toDos. 필터를 통해 toDo. id가, li.id와 같지 않은 것은 모두 참이니 패스 하고
선택된 값은 toDo의 id와 li의 id가 같으니 필터링 당하는 것이다.