[JS ES6] To-do list (+localStorage)

choii_ii·2025년 3월 26일

[JS ES6] 스터디노트

목록 보기

6/6

To-do list

📌 KEY POINT

💚 리스트 등록 시, 입력한 input value값을 그대로 리스트에 추가
💚 리스트 삭제 시, 선택한 리스트를 찾아 삭제해야하는 로직
💚 createElement()와 append() 메서드를 활용하여 스크립트로 DOM 요소 생성
💚 선택한 리스트를 매칭 시키기 위해 id값으로 구분이 필요 (Date.now()라는 생성자 함수 사용)
💚 filter 속성을 사용하여 id 값이 매칭되는 리스트 구분
💚 localStorage에 텍스트 타입으로 저장시키기 위해 JSON.stringify() 속성 사용
💚 텍스트 타입으로 저장된 localStorage 데이터 값을 다시 배열로 저장시키기 위해 JSON.parse() 속성 사용

👉🏻 마크업은 이렇게! (HTML5)

🩵 텍스트를 입력할 input 폼 생성

🩵 저장된 list를 노출 시킬 리스트 영역 생성

<body>
 <form id="todo-form">
	<input type="text" placeholder="Write a To Do and Press Enter" required>
 </form>
 <ul id="todo-list"></ul>
</body>

👉🏻 스크립트는 이렇게! (JS ES6)

1️⃣ paintTodo() 함수 실행

🩵 To-do list에 새로운 항목을 추가
🔹 등록된 리스트는 li > span + button 구조로 마크업되도록 createElement 메서드를 사용

<script>
function paintTodo(newTodo){
    // 전달받을 newTodo는 handleTodoSubmit함수에서 실행시킨 todoInput.value값을 의미

    const li = document.createElement("li");
    li.id = newTodo.id;

    const span = document.createElement("span");
    span.innerText = newTodo.text;

    const deleteBtn = document.createElement("button");
    deleteBtn.innerText = "❌";
    deleteBtn.addEventListener("click", deleteTodo);

    li.append(span);
    li.append(deleteBtn);
    todoList.append(li);
}
</script>

2️⃣ handleTodoSubmit() 함수 실행

🩵 input이 submit되면 handleTodoSubmit() 함수 실행
🔹 입력한 value 값을 newTodo 변수에 저장 (리스트에 value 값을 노출시켜야하기 때문)
🔹 input이 submit되면 value 값을 공백으로 리셋
🔹 등록한 리스트(text)를 newTodoObj 객체로 변환하여 todos 배열에 추가
🔹 id는 리스트 삭제 시, 클릭한 리스트와 매칭 시켜야 하기 때문에 임의로 Date.now(등록시간) 값을 부여
🔹 paintTodo()함수 실행 시, 인수로 newTodoObj를 추가 (=새로운 할 일 추가)
🔹 saveTodos()를 호출하여 localStorage에 저장

<script>
function handleTodoSubmit(event){
    event.preventDefault();
    
    const newTodo = todoInput.value;
    todoInput.value = ""; // 입력 후 공백으로 업데이트

    //newTodo를 todos에 배열(array)로 저장
    const newTodoObj = {
        text:newTodo,
        id:Date.now(),
    }
    todos.push(newTodoObj);

    paintTodo(newTodoObj);  // todos 배열을 list로 생성
    saveTodos();
}

todoForm.addEventListener("submit", handleTodoSubmit);
</script>

3️⃣ deleteTodo() 함수 실행

🩵 삭제 버튼을 클릭하면 deleteTodo() 함수 실행 (=리스트 삭제)
🔹 handleTodoSubmit()함수에서는 id는 리스트 삭제 시, 클릭한 리스트와 매칭 시켜야 하기 때문에 임의로 Date.now(등록시간) 값을 부여했었다.
🔹 클릭한 리스트의 부모요소를 li라는 변수에 저장
🔹 todos 배열 중 filter 속성을 사용하여 todo.id값과 li.id값이 다른 리스트만 todos에 저장 (즉, 삭제버튼을 클릭한 해당 li의 id와 일치하는 항목을 제외하고 나머지 할 일만 남김)
🔹 saveTodos()를 호출하여 변경된 목록을 저장

<script>
function deleteTodo(event){
    // console.log("delete click!");
    const li = event.target.parentElement;
    // event(클릭)대상의 부모요소

    todos = todos.filter(function(todo){
        return todo.id !== parseInt(li.id);
    })
    li.remove();
    // console.log(li.id);
    saveTodos();
};
</script>

4️⃣ saveTodos() 함수 실행

🩵 리스트를 영구적으로 localStorage에 저장시키기 위한 함수
🔹 localStorage.setItem()을 사용하여 todos 배열을 문자열로 변환한 후 저장. (배열은 JSON.stringify()를 사용해 텍스트로 변환)

<script>
function saveTodos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(todos)); 
    //["a", "b", "c"]처럼 텍스트 타입으로 저장됨
}
</script>

5️⃣ 페이지 로드 시, 기존 할 일 목록 가져오기

🩵 페이지가 로드될 때, localStorage.getItem(todos)을 사용하여 저장된 데이터를 가져오고, JSON.parse()로 다시 객체 배열로 변환
🔹 JSON.stringify() : 배열/객체데이터를 "텍스트"타입으로 변환
🔹 JSON.parse() : 텍스트를 "배열"로 변환

🩵 localStorage에 저장된 값이 존재한다면
🔹 변환된 데이터를 todos 배열에 할당하고, paintTodo()로 목록을 다시 그립니다.
🔹 forEach()**는 배열의 모든 항목에 대해 반복 작업을 수행할 때 사용. localStorage에서 가져온 할 일 목록을 화면에 표시할 때 사용

<script>
const savedTodos = localStorage.getItem(TODOS_KEY);
// console.log(savedTodos);

if(savedTodos !== null){
    const parsedTodos = JSON.parse(savedTodos); 
    // console.log(parsedTodos);
    todos = parsedTodos;
    parsedTodos.forEach(paintTodo);
}
</script>

choii_ii

퍼블리셔 / 작업 기로끄v

이전 포스트