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
함수가 동작하도록 이벤트리스너를 추가한다.
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
함수를 실행해 화면에 그려준다. renderTodoItem
함수의 ulEl.prepend(liEl);
코드로 인해, 마지막에 추가된 To-do가 가장 상단으로 끌어올려져 최신순으로 정렬된다.즉 Vanilla JS로 수정을 구현하려면
1.화면상 수정 form 으로 변경
2.변경된 내용으로 서버로 전달 + 화면상 업데이트
위와 같은 과정으로 값의 상태를 서버와 화면 모두 업데이트 해줘야한다.