[React][프로젝트] My Todo List💕(2) - 개인 과제 그로스

🔨 UX 고려한 유효성 검사

  기존 코드는 Todo List 입력폼에 빈 문자열이 입력되면, 아무런 동작이 일어나지 않도록 return;을 해주었는데, 피드백 때 사용자가 문제점을 알 수 있게 해주는 것이 좋다 해서 빈 문자열 입력을 할 경우 alert 메세지가 뜨도록 수정해주었다.

 // 빈 문자열 입력 시 alert
 if (!(title.length && content.length)) {
 return alert("Todo List의 제목과 내용을 적어주세요❗");

 

⚒️ changeListState 함수 수정

  List Item의 상태를 변환하는 함수인 changeListState에서 기존에는 todoList 객체의 내부 데이터를 실제로 변경하는 방식으로 코드를 짰었다는 것을 피드백 과정 중에 알게 되었고, 따라서 불변성 유지를 위해 새로운 객체를 생성하는 방식으로 코드를 수정하였다.

// todo list 상태 변환
const changeListState = (id) => {
    const todoListState = todoList.map((item) => (item.id === id ? { ...item, isCompleted: !item.isCompleted } : item));

 

🛠️ 그 외 수정한 내용

• <label>의 htmlFor 속성 활용
• 코드의 통일성을 위해 <input>에서 이벤트핸들러 함수를 바로 작성하는 것이 아닌, 미리 함수로 선언 후 연결하는 방식으로 수정