TIL : 23.02.16

23.02.10-23.02.16 주특기 숙련 주차 / React, todo-list

주요 일정
2월 16일(목) 10시-14시 숙련주차 퀴즈
2월 16일(목) ~21시 개인 숙련주차 과제 제출(todo lv.2)
2월 16일(목) ~21시 개인 숙련주차 과제 제출(todo lv.3)
2월 16일(목) ~21시 팀 과제 노션 작성 제출

문제1

☑️ 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음.
Form.jsx > onSubmitHandler에서 add에 대한 동작을 전달해주는 부분이 없음
dispatch로 addTodo의 액션을 전달해주고 id를 payload로 주는 부분 추가

const onSubmitHandler = (event) => {
    event.preventDefault();
    if (todo.title.trim() === "" || todo.body.trim() === "") return;
    
    ...

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

문제2

☑️ 추가하기 버튼 클릭 후 기존에 존재하던 아이템들이 사라짐.
todo.js > switch~case : ADD_TODO에서 todos에서 기존값은 유지되지않고 새로운 값만 불러오도록 되어있음
스토어에 저장한 데이터를 유지시키고, 새로운 값도 불러오는 것으로 수정

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

문제3

☑️ 삭제 기능이 동작하지 않음.
todo.js > switch~case 내에서 DELETE_TODO일때의 동작이 없음
case DELETE_TODO: 추가

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

문제4

☑️ 상세 페이지에 진입하였을 때 데이터가 업데이트 되지 않음.
Detail.jsx 에서 액션이 실행될때 값을 받아오는 부분이 없음
useEffect로 동작이 실행될때 ID에 맞는 정보를 불러오겠다는 구문 작성
dispatch로 getTodoByID의 액션을 id 값에 따라서만 불러오도록 추가

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

문제5

☑️ 완료된 카드의 상세 페이지에 진입하였을 때 올바른 데이터를 불러오지 못함.
List.jsx < return 구문 중 Done..!에 해당하는 구문내의 Link가 바라보는 주소가 잘못됨
주소값을 index가 아니라 각 아이디에 맞게 ${todo.id}로 수정

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

문제6

☑️ 취소 버튼 클릭시 기능이 작동하지 않음.
List.jsx < return 구문 중 Done..!에 해당하는 구문내의 onClick 동작이 id값 없이 진행됨
toggleStatusTodo의 payload가 id이므로 id없이 진행할 경우 동작하지 않게됨

onClick={() => onToggleStatusTodo(todo.id)}

ℹ️ Todo_List_Quiz2_github