(ToDoList) #ToDo 리스트 만들기2

ToDo 리스트 만들기2

 

---

 

 

- 만들고 싶은 기능

1. 버튼을 눌러 리스트를 삭제하면 화면상에서는 지워지지만 새로고침 시, localStorage에서는 지워지지 않는 현상을 수정해야한다.

JavaScript에서는 html의 부모요소를 target.parentElement를 통해 찾고 remove해주면 요소를 제거할 수 있었지만, 데이터에서 사용자가 없앤 element를 찾기란 쉽지 않다. 게다가 같은 값의 데이터가 있는 경우 어떤 것을 지워야하는지 알 수 없으므로, 각 데이터마다 id를 부여한다. (object형식으로)

 

1) JavaScript

 

• 먼저 data 형식을 바꿔야 하므로, 사용자가 값을 입력했을 때 object 형식으로 저장하는 방법으로 바꿔야한다. 그렇다면 submit을 누른 시점인 함수로 돌아가 수정한다.

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

 

- 위에서 Date.now() 라는 랜덤으로 숫자를 생성해주는 함수를 활용하여 각 값의 고유 id를 부여해준다. 이제 원래 newToDo값을 받던 함수들의 파라미터에 newToDoObj를 넣어준다. 즉, 원래 string 변수를 받던 것들이 모두 오브젝트를 받기 시작함. 즉, 다른 함수들에 문자열이 아닌 오브젝트를 받고 그에 맞게 처리해 원하는 데이터값을 내보내야하므로 다른 함수들의 수정이 필요하다.

먼저 toDos.push(newToDoObj)부분과 paintToDo부분을 살펴보자.

 

• painToDo 함수 수정

function paintToDo(newToDo) {
  const list = document.createElement("li");
  
  // 기존에는 list에 아무 것도 하지 않았지만 list에 id값을 부여해 제거하는 방향으로 수정
  list.id = newToDo.id;
  
  const span = document.createElement("span");
  // 기존은 span.innerText =newToDo 였지만 object에 맞게 수정
  span.innerText = newToDo.text;
  
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteToDo);
  list.appendChild(span);
  list.appendChild(button);
  toDoList.appendChild(list);
}

 

• saveToDos 수정

// const toDos = [] 부분에 object형식이 들어가므로 


function saveToDos() {
	// 기존에는 localStorage.setItem(TODOS_KEY, toDos) 였음.
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

 

*** localStorage에 object형식을 저장할 때, localStorage.setItem(키이름, JSON.stringify(변수))

***localStorage에서 object를 꺼내올 때, localStorage.getItem(JSON.parse(키이름));

 

• 위 처럼 수정하고 난 후에 html에서는 부모요소를 제거하고, 제거된 부모요소의 id를 가져와 localStorage와 같은 id였다면 그 요소를 제거한다.

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

 

• 하지만 새로고침해도 계속 삭제했던 값들이 저장되어보인다. 이를 수정하기 위해선, const toDos를 수정해주어야한다. 또한 새로고침시, localStorage에 있는 값을 toDos에 넣어주고, object에 있는 값들을 모두 paint해주어야한다.. 

// 상수였던 toDos를 변수로 변환해준다.

let toDos = [];


const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos){
	const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}

 

 

너무 어려워서 다시 혼자 해봐야겠다..