[자바스크립트] 정리 6

기본 흐름

querySelector로 HTML element 가지고 오기 

eventListener 등록

event에서 HTML 동적으로 변경(creatElement, innerText, appendChild 등) 

 

1. To Do List 만들기 

- AddtoDo

(1) form이 submit되면 event 발생 

(2) handleToDoSubmit 에서 input을 받고 이를 AddtoDo로 전달 

(2) li, span, button을 만드로 span과 button을 li의 child로 append   

   : <li><span>To Do</span><button>X<button/></li>

(3) button에 aeventListener 생성

 

- deletoTodo

(1) button 클릭시 전달받은 event에서 li 찾아오기 : event.target.parentElement

(2) li 삭제

const toDoForm = document.querySelector("#todo-form");
const toDoInput = toDoForm.querySelector("input");
// const toDoInput = document.querySelector("#todo-form input"); do the same thing upper
const toDoList = document.querySelector("#todo-list");

function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    AddToDo(newTodo);
}

function deleteTodo(event){
    const li = event.target.parentElement;
    li.remove();
}

function AddToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    span.innerText = newTodo;
    button.innerText = "❌";
    button.addEventListener("click", deleteTodo)
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

 

2. JSON.stringfy(object)

- object를 string으로 변환 

- localStorage에는 string밖에 저장하지 못하므로 넣기위해서 미리 사용해야한다. 

 

3. JSON.parse(string)

- string을 object로 변환

 

4. array.forEach()

- array를 돌면서 각 item을 parameter로 전달하여 함수를 실행, item들은 자동으로 전달된다.

 

5.  To Do List 불러오기 

페이지를 새로고침해도 이전에 입력해둔 To Do List를 그대로 가져오도록 해보자

(1) localStorage에서 getitem 시도

(2) null 이 아니라면 이전에 입력해둔 To Do List를 불러온다

(2)-1 JSON.parse()로 localstorage의 to do list를 array로 반환

(2)-2 forEach()로 각각의 요소를 AddToDo로 전달 

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEYS);

if (savedToDos !== null){
    const parsedToDos = JSON.parse(savedToDos); // stringd을 array object로
    // parsedToDos.array.forEach((item) => console.log("this is the turn of", item)); // array돌를 면서 각 item에 대해 함수 실행, item들은 자동으로 전달된다.  
    toDos = parsedToDos; // 이전에 저장해둔 ToDos 불러오기 
    parsedToDos.forEach(AddToDo);
}                                   // arrow function

 

6. To Do List 삭제하기 

array에서 삭제를 위해서 사용할 기능 

(1) array의 원소를 object로 만들어서 각각의 값에 id 부여해주기

- array에서 어떤 원소를 삭제할 것인지 알려주어야 한다. 따라서 id값을 가진 object로 만들어준다. 

- id 는 랜덤한 값을 부여하기위해 Date.now() 함수를 사용한다.

const newTodoObj = {
        text: newTodo,
        id: Date.now(),
    }

- HTML에서 li을 생성할때도 동일한 id를 추가해준다. 

 

(2) array.filter 를 사용하여 array에서 삭제

- 사실 삭제한다기 보다는 해당 원소를 제외하고 새로운 array를 만드는 것임. 

- 비교할 때 li의 id는 문자열(ex. id="123145667788")이므로 parseInt()를 해준다. 

toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); // filter와 parseInt 사용

 

* toDos는 계속 변할것이므로 let으로 정의한다. 

let toDos = []; // 변수로 지정

(3) localStorage에 array update하기

- array가 변경될 때 마다 saveToDos() 함수를 사용하여 localStorage에도 update를 해준다. 

function saveToDos(){
    localStorage.setItem(TODOS_KEYS, JSON.stringify(toDos));
}