momentum 동적으로 추가되는 태그에 id 부여하기, 삭제하기

하지만 우리가 삭제한 값이 어떤 값인지 로컬스토리지에서 어떻게 알까? 알수있는 방법이 없다. 브라우저가 글을 읽을 수 있는것도 아니고.

그래서 애초에 toDos 배열에 사용자의 todo 가 추가될때, 단순한 문자열이 아니라 객체 object의 형태로 id를 가지고 들어온다면 구분할 수 있다. 

처음으로 돌아가서 handletodoSubmit 함수에 newToDoObj 변수를 객체로 새로 정의한다. 객체에는 text와 id 키가 있고 text부분에는 사용자가 입력한 newToDo 변수가 들어간다. 그리고 id는 Date.now()를 입력한다. 이것은 밀리세컨드 단위로 현재 시간을 알려주는 함수인데, submit이 발생되는 그 순간의 유일한 밀리세컨드 단위의 순간만을 데이터 가지므로 유일한 id가 될수있다. 그리고 toDos배열에 이 객체를 전달해주고 paintToDo함수에도 이 객체를 전달한다. 원래 paintToDo에는 단순한 text를 전달해서 출력했었는데 객체를 전달했으니 이상하게 나올것이다. span.innerText를 newtodo.text로 변경해야 한다.

그리고 paintToDo함수에서 li를 만들어줄때 li의 id를 newToDo로 받은 newToDoObj객체의 아이디와 동일하게 설정한다.

하나의 li가 생성될때마다 id가 부여되고 그 id를 li에 붙여서 항상 공유하게 된다.

이제 로컬스토리지에는 이렇게 text와 id 키를 가진 객체가 저장된다. 우리가 뭔가 삭제버튼을 눌렀을때 우리가 누른 그 버튼의 li 의 id가 뭔지 알면 삭제할 수 있다.  

우리는 이미 event라는 것을 둠으로써 이벤트가 일어난 정보를 담은 객체를 event에 담아서 가져올 수 있었다. 

덕분에 클릭한 것이 어떤 li인지도 알수 있다.

filter 함수는 forEach처름 배열의 각 요소마다 적용이 되는데, 배열의 각 요소를 콜백함수마다 대입해서 true가 되는 것들만 모아놓은 배열을 다시 만들어 주는 함수라고 한다. 즉, filter를 통해 toDos배열이 바뀌는게 아니라 콜백함수의 조건에 맞는 배열들을 새로 만들어주는 것.

하지만 위 코드에서는 toDos= toDos.filter(콜백)이라고 했으므로 toDos를 바꿔준것이나 다름없다. 코드의 의미는 기존에 toDos 배열에 들어있던 객체마다 filter가 적용될건데, 그 객체의 id가 클릭이벤트가 발생된 li의 id와 다르냐? 라고 묻는 것이다. 다르다면 남겨둘것이고, 같다면 (결과가 false라면) 지울것이다. 그리고 saveToDos로 다시 저장한다. 이를 통해 사용자가 클릭한 삭제버튼을 정확하게 파악한 후 삭제된 li가 제거된 toDos를 다시 로컬스토리지에 저장할 수 있게 되었다.