To Do LIst(응용) 질문

Question

안녕하세요! 강의보다가 질문이 생겨 작성합니다. To Do LIst(응용) 중 삭제 기능이 있는 코드인데요. const delItem = (event) => { const target = event.target.parentElement; todos = todos.filter((todo) => todo.id !== parseInt(target.id)); save(); //remove 메소드 target.remove(); }; 이 코드에서 아래 코드만 삭제해보면 html 구조내 li 만 삭제되고 localStorage에선 삭제가 안되더라구요! 그 이유가 todo의 아이디와 삭제 버튼이 눌린 타겟의 아이디가 같지않으면 todos 배열에 담고, 저장하기 때문이지요? (즉, 같은 아이디라면 todos 배열에 저장이 되지않음) todos = todos.filter((todo) => todo.id !== parseInt(target.id)); save();

이룸코딩 · Answer

뭉치님 안녕하세요! 네 이해하신 바가 맞습니다! HTML 내에서는 target.remove() 때문에 사라지게 됩니다. 이 부분은 여기 를 참고해주세요! 로컬스토리지에는 todos 를 저장하는 방식이고, 말씀하신 것처럼 아이디를 기준으로 필터링을 해줌으로써 삭제하고자 하는 요소를 '뺀' 새로운 배열을 만들고 저장하게 됩니다.