노마드 ToDo ( javascript - react)

리액트

input value 추출, 배열에 요소 추가, map 으로 리스트 꺼내서 보여주기

1. 입력값 알아내기

onChange 로 인풋 value 를 알아낸다.

2. onSubmit 시, 현재 toDo 를 기존 toDos 에 추가.

: 배열 앞에 추가하기 위해 ( ... 스프레드 연산자 이용)

• submit 기본 동작(새로고침)을 막자.
• 입력없이, submit 하면 무시.
• submit 동작 끝에, 인풋박스를 공백으로 만든다.

3. toDos 배열을 화면에 보여주기

toDos 리스트를 map 으로 <li>를 붙여서 loop

4. toDos 리스트에서 요소 삭제

1) 할 일 리스트 (삭제) 클릭 : ()=>deleteToDo(index)

2) toDos 배열.filter(삭제클릭한 인덱스가 아닌 것들로 필터 적용)
   toDos.filter(()=>index !== toDoIndex)
실제로는 지우는 것이라기 보다는, 화면에 보여줄 array 에서 제외(필터)한 것.

import React from 'react';
import { useState } from 'react';

function App () {
  const [toDo, setToDo] = useState('');
  const [toDos, setToDos] = useState([]);
  const onSubmit = (e) => {
    e.preventDefault();
    if (toDo === '') {
      return;
    }
    setToDos((toDos) => [toDo,...toDos]);
    setToDo(""); // *** input>value={toDo} 초기화
  }
  const onChange = (e) => setToDo(e.target.value);
  // 부모요소를 삭제하는게 아닌 배열에 들어가있는 index와 삭제할(버튼의 li) index를 찾아서 삭제할 경우 (filter함수 사용)
  // const li = event.target.parentElement;
  // li.remove();
  const deleteToDo = index => {
    setToDos(toDos.filter((item, toDoIndex)=>index !== toDoIndex))
  };
  return (
    <div>
      <h1>To Do List ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input onChange={onChange}
          value={toDo}
          type="text"
        />
        <button>입력</button>
        <ol>
          {toDos.map((item, index) =>  <li key={index}>{item}<button onClick={()=>deleteToDo(index)}>⛔</button></li>)}

        </ol>
      </form>
    </div>
  );
};

export default App;

자바스크립트 ToDo

복잡타....

// document에서 html 태그로 js-toDoForm의 input과 js-toDoList 가져오기
const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");

// toDo list
const TODOS_LS = 'toDos';

// toDo를 추가 삭제 해줘야 하기때문에 let으로 선언
let toDos = [];

// todo 삭제하기
function deleteToDo(event){
    const btn = event.target;
    const li = btn.parentNode;
    toDoList.removeChild(li);
    const cleanToDos = toDos.filter(function(toDo){
        return toDo.id !== parseInt(li.id);
    });
    toDos = cleanToDos;
    saveToDos();
}

// todo localStorage에 저장하기
function saveToDos(){
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
}

// localStorage 에서 todo 불러오기
function loadToDos(){
    const toDosLoaded = localStorage.getItem(TODOS_LS);
    if(toDosLoaded !== null){
        const parsedToDos = JSON.parse(toDosLoaded);
        parsedToDos.forEach(function(toDo) {
            paintToDo(toDo.text);
        });
    }
}

// todo list 생성 및 출력하기
function paintToDo(text){
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    delBtn.innerHTML = "❌";
    delBtn.addEventListener("click", deleteToDo);
    const span = document.createElement("span");
    const newid = toDos.length +1;
    li.id = newid;
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    toDoList.appendChild(li);

    const toDoObj = {
        text: text,
        id: newid
    };
    toDos.push(toDoObj);
    saveToDos();
}

// toDoForm 을 제출하면, 값을 받아와서 리스트로 만들기
function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value = "";
}

// 페이지 로드 시 저장된 걸 불러오고, 이벤트를 처리함
function init(){
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit);
}

init();