src/components/TodoList.jsx 에서 진행해주세요!
할 일을 입력하면 입력한 할 일이 추가 되고, 완료한 할 일을 클릭하면 취소선이 생기는 Todo List를 만들어주세요!
[ 과제 조건 ]
- 처음 렌더링 될 때 todo list에 '산책 가기', '멋사 과제', '야구 보기' 가 나타나며, '멋사 과제'는 완료되어 취소선이 있는 채로 표시 되어야 합니다.
- 입력창에 todo를 입력하면 입력한 todo가 todo 목록에 추가 되어야 합니다.
- 완료한 할 일을 클릭하면 취소선이 생성되어야 합니다.
- 또한 완료한 할 일의 개수를 count하여, 모든 할 일을 완료하면 "오늘 할 일을 모두 완료하셨네요!"를 출력하는 알림창이 뜨도록 해주세요! (주의: 2개의 useEffect를 사용하여 구현해주세요)
babyLion.mp4
모든 조건을 만족하여 다음 영상과 같이 작동하게 하려면 주석으로 처리된 칸에 어떤 코드가 들어가야 할까요?
위 Todo List 과제가 보다 더 Todo List 같이 동작하도록 다음 기능들을 추가해주세요!
[ 과제 조건 ]
- 완료한 할 일의 개수를 count 하는 코드를
filter 메서드를 사용하도록 수정하여 같은 결과를 내도록 구현해주세요! - 각 todo 옆에 삭제 버튼을 생성하여 todo를 삭제할 수 있는
삭제 기능을 추가해주세요!
adultLion.mp4
이번에도 역시 조건을 모두 만족하여 가장 먼저 과제를 lionz에 제출해주신 한 분께 커피를 사드리도록 하겠습니다😎