22.12.04 일요일
📌바닐라 자바스크립트로 weekly-check-list 만들기
📒 weekly-check-list 삭제 기능 구현 오류
어제 해결하지 못했던, 삭제버튼을 누르면 전체 삭제가 되는 부분을 해결했다.
콘솔을 이곳 저곳에서 찍고,
deleteTodo 함수에서 todo, todoid ,todo.id 이것저것 다 어봐도
값은 잘 들어와있는데 클릭만하면 newtodos가 빈배열이였다.
콘솔지옥에 갇혔다.
진짜 한시간동안 함수의 위치때문인가..그럴리가 없는데.. 하면서 바꿔보고
코드를 다시 써보고, 다양한 시도를 했는데
드디어ㅜㅜ문제를 발견..
filter함수에서
const deleteTodo = (todoId) => {
console.log(todoId);
const newTodos = getAllTodoList().filter((todo) => todo.id !== todoId);
console.log(newTodos);
setTodoList(newTodos);
paintToDoList();
};
ilter((todo)=>{todo.id !== todoId})
ilter((todo) => todo.id !== todoId)
중괄호 차이하나로 문제가 생겼던 것이다..
전에도 한 번 이거때문에 안되어서, { return } 대괄호를 사용할때는 return을 넣어줘야한다고 적어 놨던 기억이 떠올랐다..
당연했다..
화살표함수기때문에 괄호로 감싸진부분이 return이 되는것이기때문에,
따로 return문을 작성하지 않아도 return이 되는데,
중괄호로 감싸면 return문이 없기때문에, return을 꼭 써서 반환해주어야 한다!
// 그래서 filter함수의 리턴값이 없어서 빈배열이 출력되어
그것을 settodolist의 값으로 넣어줘서 계속 전체 삭제가 되었던 것이다..
굉장히 단순하고 당연한 문제인데..자꾸 나도모르게 함수 사용할때 중괄호를 냅다 입력..
잘 생각하고 좀 더 빠르게 문제를 해결할 수 있도록..삽질한 시간이 아깝지만..다신 까먹지 않겠지라고 생각해야겠다..
지쳐서..내일 다시 나머지 기능 구현하기로..
https://github.com/yeonjujeong0511/JS-TIL/tree/main/To-do-List/weekly-list
