dltjswozzzzz/fe-react-hooks-second

react hooks 두번째 세션의 과제를 위한 레포지토리입니다.

[FE] React Hooks

이번 세션에서는 React Hooks 중 useEffect에 대해 다루었습니다.

따라서 이번 과제는 이번주 동안 배운 내용들을 모두 활용하는 문제로 구성 되어 있습니다😎

[✅ 과제: Todo List 만들기 ✅]

src/components/TodoList.jsx 에서 진행해주세요!

할 일을 입력하면 입력한 할 일이 추가 되고, 완료한 할 일을 클릭하면 취소선이 생기는 Todo List를 만들어주세요!

[ 과제 조건 ]

1. 처음 렌더링 될 때 todo list에 '산책 가기', '멋사 과제', '야구 보기' 가 나타나며, '멋사 과제'는 완료되어 취소선이 있는 채로 표시 되어야 합니다.
2. 입력창에 todo를 입력하면 입력한 todo가 todo 목록에 추가 되어야 합니다.
3. 완료한 할 일을 클릭하면 취소선이 생성되어야 합니다.
4. 또한 완료한 할 일의 개수를 count하여, 모든 할 일을 완료하면 "오늘 할 일을 모두 완료하셨네요!"를 출력하는 알림창이 뜨도록 해주세요! (주의: 2개의 useEffect를 사용하여 구현해주세요)

babyLion.mp4

모든 조건을 만족하여 다음 영상과 같이 작동하게 하려면 주석으로 처리된 칸에 어떤 코드가 들어가야 할까요?

[🦁 어른 사자의 길 🦁]

위 Todo List 과제가 보다 더 Todo List 같이 동작하도록 다음 기능들을 추가해주세요!

[ 과제 조건 ]

1. 완료한 할 일의 개수를 count 하는 코드를 filter 메서드를 사용하도록 수정하여 같은 결과를 내도록 구현해주세요!
2. 각 todo 옆에 삭제 버튼을 생성하여 todo를 삭제할 수 있는 삭제 기능을 추가해주세요!

adultLion.mp4

이번에도 역시 조건을 모두 만족하여 가장 먼저 과제를 lionz에 제출해주신 한 분께 커피를 사드리도록 하겠습니다😎

과제 제출 : 과제는 4월 30일 일요일 21시 00분 전까지 본인 repository에 push 해주신 뒤, repository url을 lionz에 생성되어 있는 과제 제출란에 제출해주시면 됩니다.