React 공부 (12)

오늘은 2주차 시험을 보았다.

6곳의 문제가 있는 코드를 수정하여 기능을 복구하는 내용.

• 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음.
  - dispatch를 추가해 변화된 값을 추가하는 action을 한다. (addTodo)
  - 기존배열 …todo에 nextId값이 추가 된다.

dispatch(addTodo({...todo, id}));
    		setTodo({id:0, title:"", body:"", isDone:false});
 	 };

• 추가하기 버튼 클릭 후 기존에 존재하던 아이템들이 사라짐.
  - ADD_TODO 부분에 기존에있던 배열들[…state.todos]를 추가하고 뒤에 action.payload가 추가되게 끔 작성
  

case ADD_TODO:
      		return {
        	...state,
        	todos: [...state.todos, action.payload],
     	 };

• 삭제 기능이 동작하지 않음.
  - 삭제 부분 case가 없어서 todos에 filter를 돌려 id값을 비교하여 id값이 일치하지 않는 것들만 출력하게 작성함.

case DELETE_TODO:
     		 return {
       		...state,
        	todos: state.todos.filter((todo) => todo.id !== action.payload),
      	};

• 상세 페이지에 진입 하였을 때 데이터가 업데이트 되지 않음.
  - useEffect로 상세 페이지가 렌더링될때 dispatch를 실행하고 getTodoById는 find를 사용하여
  action.payload 값과 todo.id의 값이 일치하는 것만 보여준다.
  의존성배열 [] 이 비어있으므로 useEffect는 페이지가 이동하는 최초 1회만 실행된다.

useEffect(() => {
    		dispatch(getTodoByID(id));
 	 }, [])

• 완료된 카드의 상세 페이지에 진입 하였을 때 올바른 데이터를 불러오지 못함.
  - 링크가 index 값으로 작성된걸 todo.id값으로 변경
  

<StLink to={`/${todo.id}`} key={todo.id}>

• 취소 버튼 클릭시 기능이 작동하지 않음.
  - 취소버튼 클릭시 발생하는 onToggleStatusTodo에 todo의 id값으로 조회하여 케이스를 돌리도록 수정함.

<StButton borderColor="green" onClick={() => onToggleStatusTodo(todo.id)}>