참고자료
[ToDoList] 할 일 완료 상태 체크
React-TodoList
TodoList 제목과 내용 입력부분과
리스트 제거 부분까지는 강의만 보고 정리해서 완성된 상태에서
진행중인 투두와 완료된 투두 기능 구현이 구상만 쉽고 코드짜는게 막혀서 힘들었다.
// 진행-완료 변경버튼 기능
const CheckedHandler = (id) => {
const checkedTodo = lists.map((todo)=>{
return todo.id === id? {...todo, isDone: !todo.isDone} : todo
})
setLists(checkedTodo);
};삭제버튼에서 filter로 선택된 아이디 값이 아닌 리스트만 보이게 하는 함수만
생각하고 진행완료 기능도 filter로 하니까 될 것 같은데 작동을 안해서 살짝 해맸다.
근데 생각해보니 진행완료 상태만 변경되고 데이터의 총 갯수가 변하는 게 아니라서
filter를 map으로 바꿔주니 바로 isDone이 잘 바뀌더라ㅎ
그리고 이제 진행중 투두와 완료 투두 자리를 바뀌게 하는 기능은
머리로는 어려웠는데 작성해보니 생각보다 금방 됐다.
lists.filter((list) => !list.isDone) // 진행중 부분
lists.filter((list) => list.isDone) // 완료 부분이렇게 필터해준 리스트에 원래 매핑된 리스트를 나오게 하고
만들어둔 CheckedHandler 를 잘 사용하니 자리가 잘 바뀜
(나는 리스트 컴포넌트를 분리시켜놔서 CheckedHandler를 리스트에 props로 내려줬다)
그리고 진행 완료 버튼 토글도 생각한대로 찾아본대로 했는데
안돼서 좀 굴러보다가
{item.isDone ? <>취소</> : <>완료</>}너무 간단하게 완성돼버려서 허탈할 뻔.,
처음엔 삼항연산자 리턴부분에 아예 버튼태그를 통째로 넣고 글자만 다르게 했다가
진행도 완료도 버튼의 속성은 같아서 빼고 태그를 밖으로 빼고
그 안에 글자만 다르게 했는데
isDone 을 찾을 수 없다고 오류가 떴다.
알고보니 내려받은 게 item인데 item.isDone으로 선택자 지정을 안해줘서 그런 것!
아직 실제 삭제나 수정기능은 배우기 전이라 보여주기 식 투두리스트지만
1단계 과제는 그럭저럭 완성~
