TIL 10/10

Rami·2024년 10월 10일

TodayILearn

목록 보기
21/61

7.2 Deleting To Dos

function deleteToDo(event){
 	console.log(event.target.parentElement); 
    // ->> 어떤 li부모를 가진 btn인지 확인할 수 있음
}

7.3 Saving To Dos

toDos에 저장 된 li값들은 object이다.
추후 사용을 위해서 JSON.stringify(toDos)를 통해 obj > string 타입으로 바꿔준다.

예시1

예시2

예시3

(아무튼) 결론!!@!!

localStorage에는 object로 저장된다.
이를 끌어와 사용하기 위해서는 JSON.stringify()를 이용해서 string으로 바꿔줘야한다.

function deleteToDo(event){
    // console.log(event.target.parentElement); // 어떤 li부모를 가진 btn인지 확인할 수 있음
    const li = event.target.parentElement; // 삭제하고 싶은 li
    console.log(li);
    li.remove();
}
  1. deleteToDo 함수는 버튼(btn)이 클릭되었을 때 실행되는 함수입니다.
  2. 버튼이 클릭되면 deleteToDo 함수의 매개변수로 event 객체가 전달됩니다.
  3. event 객체는 클릭된 버튼에 대한 정보를 담고 있습니다.
  4. event.target은 클릭된 버튼을 가리킵니다.
  5. event.target.parentElement는 클릭된 버튼의 부모 요소인 li를 가리킵니다.

따라서, event.target.parentElement를 통해 클릭된 버튼이 속해 있는 li 요소를 알 수 있게 되는 것입니다.

이렇게 event 객체를 통해 클릭한 버튼 및 그 부모 요소를 추적할 수 있다는 점을 기억하기

localStorage에는 array를 저장할 수 없다.

JSON.stringify > parse

JSON.stringify()

예시


7.4 Loading To Dos part One

JSON.parse()

예시 : 단순 string > array


7.7 Deleting To Dos part Two

filter는 항상 true를 반환해야한다.

false를 반환하면 그 item은 새로운 filter에 포함되지 않는다.

filter를 이용해 특정 id값 지우기


7.8 Deleting To Dos part Three

filter를 쓰면 새로운 arr가 만들어지고, 기존 arr는 변함없다

profile
YOLO

0개의 댓글