[JS] Vanilla JS로 To-do list 수정 구현하기

To-do 웹사이트 만들 때 수정하는 것이 제일 어려웠다. 어떻게 구현했는지 기록해보려고 한다.

🐾 수정 버튼

To-do를 추가하거나 조회할 때, 화면에 To-do 항목을 그려줄 renderTodoItem 함수를 만든다. 이 함수는 To-do 하나의 항목이 그려질 내용을 말한다.

function renderTodoItem(todosServerData) {
  const liEl = document.createElement('li');
  liEl.id = todosServerData.id;
  liEl.className = 'li';
  생략...
  const editBtn = document.createElement('button');
  editBtn.className = 'editbtn';
  editBtn.innerText = '🖋';
  editBtn.title = 'edit';
  editBtn.addEventListener('click', editHandler);
  생략...
}

하나의 To-do 리스트를 생성하고, 그 안에 수정 버튼을 생성하는 내용이다. 수정 버튼을 클릭하면 editHandler 함수가 동작하도록 이벤트리스너를 추가한다.

🐾 수정가능한 input으로 변경, 저장과 취소

function editHandler(e) {
  //기존 요소 불러오기
  const li = e.target.parentElement;
  const todoText = li.querySelector('.todotext');

  //수정 폼 열기
  li.innerHTML = `<form action="GET" class="todotext_edit">
  <input class="todotext_edit_text" value="${todoText.innerText}">
  <input class="todotext_edit_ok" type="button" value="ok">
  <button class="todotext_edit_cancel" type="button" value="cancel">cancel</button>
  </form>`;

수정 버튼을 클릭하면 수정 버튼을 감싸고 있는 li 태그의 내용이 위와 같이 form 형태로 변경된다. form 안에는 수정을 완료하는 버튼과 취소하는 버튼이 있다.

  //수정중 submit
  const editInput = li.querySelector('.todotext_edit_text');
  editInput.parentElement.addEventListener('submit', (e) => {
    e.preventDefault();
    editCompleted(e, editInput.value);
  });

  //수정중 cancel
  const editcancelBtn = li.querySelector('.todotext_edit_cancel');
  editcancelBtn.addEventListener('click', (e) => editCompleted(e, todoText.innerText));
}

수정을 완료하는 editInput 버튼의 부모요소인 form에 이벤트리스너를 추가하여 editCompleted 함수가 실행되도록 한다. 수정을 취소하는 editcancelBtn 버튼에 이벤트리스너를 추가하여 editCompleted 함수가 실행되도록 한다. (근데 취소이기 때문에, 서버에 값이 반영될 필요없이 화면에서만 form을 닫아주면 될 것 같다. 수정이 필요한 부분!)

🐾 작성일시 업데이트 및 최신순으로 정렬

async function editCompleted(e, text, done) {
  const li = e.target.closest('li');
  const getEditData = await editServerTodos(li.id, text, done);
  console.log(getEditData);
  li.remove();
  renderTodoItem(getEditData);
}

• 수정 완료 버튼을 누르면 실행되는 editCompleted 함수는 서버로 수정된 값을 전달하고, 기존의 To-do 리스트를 삭제한 후, 업데이트 된 정보를 갖고 renderTodoItem 함수를 실행해 화면에 그려준다.
• 서버로 수정된 값을 전달하면 하나의 To-do의 업데이트된 일시를 response 값으로 보내주기 때문에, 화면상에서 작성일시도 함께 업데이트 된다.
• 코드에서 보이듯 수정된 하나의 To-do가 삭제되고, response 값을 바탕으로 하나의 To-do가 화면에 추가된다. 그렇기에 renderTodoItem 함수의 ulEl.prepend(liEl); 코드로 인해, 마지막에 추가된 To-do가 가장 상단으로 끌어올려져 최신순으로 정렬된다.

🐾 Vanilla JS로 수정 구현

즉 Vanilla JS로 수정을 구현하려면

1.화면상 수정 form 으로 변경
2.변경된 내용으로 서버로 전달 + 화면상 업데이트

위와 같은 과정으로 값의 상태를 서버와 화면 모두 업데이트 해줘야한다.