[과제] 숙련주차 과제 답
- 추가하기 버튼을 클릭해도 표시 되지 않고, 기존에 존재하던 아이템도 사라짐
- useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다. 하지만 todos.js의 63번째 줄에서는 설정되있지 않기 때문에 추가를 하면 기존의 데이터는 삭제되버리고 만다. todos: [...state.todos, action.payload]로 변경하면 해결될것이다.
- 삭제기능 동작x
- todos.js의 switch문에서 삭제기능이 들어가있지 않아서 도작하지 않음
case DELETE_TODO:
return {
...state,
todos: state.todos.filter((todo) => todo.id !== action.payload),
};
추가하면 해결가능
- 완료된 카드의 상세페이지 x
- list.jsx에서 61번째 줄에 있는 값은 id값을 불러와야 상세페이지가 동작이 되는데 index값을 부러오려고 했기 때문에 빈화면이 뜰것이다. {
/${index}}에서 {/${todo.id}} 로 바꾸면 해결
- 상세페이지에 진입했을때 올바른 데이터를 불러오지 못함
- useEffect은 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 기능이다. 즉 Detail.jsx에는 useEffect가 설정되지 않았기 때문에 데이터가 업데이트 되지 않는다
- 취소버튼 클릭시 동작x
- 화살표함수는 기존 함수내용을 변경해주는 기능을 가지고 있는데 list.jsx 77번째 줄에는 화살표 함수가 있지 않기 떄문에 동작이 되지 않았다. onClick={() =>onToggleStatusTodo(todo.id)로 바꾸면 해결 될것이다.
