Skip to content

멋쟁이사자처럼 11기 프론트엔드 react hooks 세션 과제를 위해 작성된 레포지토리입니다.

Notifications You must be signed in to change notification settings

eundeok9/fe-react-hooks-second

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

[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일 일요일 오후 18시 00분 전까지 본인 repository에 push 해주신 뒤, repository url을 lionz에 생성되어 있는 과제 제출란에 제출해주시면 됩니다.

About

멋쟁이사자처럼 11기 프론트엔드 react hooks 세션 과제를 위해 작성된 레포지토리입니다.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published