과제 내용(각자 카드에 복사해 주세용!)
필수 과제 - 8월 28일부터 9월 1일까지 코드 리뷰
Day 2~에서 만든 Simple List Todo 앱을 강화합니다. 아래의 요구사항을 만족하는 코드를 올려주세요.
공통- 컴포넌트에 new를 붙이지 않고 쓸 경우 에러가 나도록 방어코드를 넣어주세요.
- 컴포넌트를 class 형태로 구현한 경우 이 요구사항은 무시하셔도 됩니다.
- state를 갖는 컴포넌트의 경우, initialState를 받는 부분과 setState 함수에서 nextState를 받는 부분에서 state에 대한 validation을 추가해주세요.
- 가급적 변수는 const로 선언하며, 부득이한 경우에만 let을 사용합니다.
TodoList- To do의 값에 isCompleted라는 값을 추가합니다. 그리고 TodoList의 Todo를 클릭하면 해당 값이 토글 되도록 만듭니다.
- isCompleted가 true인 경우 text에 삭선이 그어지도록 해주세요. false로 바뀌면 삭선을 없애주세요.
- Todo text 옆에 삭제 button을 만듭니다. 누르면 삭제 되도록 처리합니다.
TodoCount- TodoCount 컴포넌트를 만듭니다.이 컴포넌트는 TodoList 아래에 렌더링 되어야 하며, 완료된 Todo의 갯수 / 전제 Todo 갯수를 표시해주면 됩니다.
- 이때 TodoCount에서 TodoList에 직접 접근해서 데이터를 가져오면 안 됩니다.
학생 CheckList
리아
채점 기준
공통- 불필요한 var, let 사용을 지양했는가?
- function 컴포넌트 형태로 한 경우, new 키워드를 붙이지 않았을 경우 에러가 나도록 처리했는가?
- 생성자 값으로 올바르지 않은 값들을 넘긴 경우의 validation을 처리했는가
- state를 처리하는 곳에서 state에 대한 validation을 처리했는가?
TodoList- isCompleted 값의 변화에 따라 삭선이 잘 그어지고 지워지는가?
- 삭제가 잘 동작하는가?
TodoCount- TodoList를 의존하지 않고 동작하도록 구현이 되어있는가?
- Todo 갯수의 변화에 따라 TodoCount 내의 정보가 잘 변경 되는가?