TIL34-01 리액트 숙련 주차 퀴즈 풀이

1. 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음.

• 새로 생성된 아이템을 넘겨주지 않아 state가 변하지 않았기 때문에 화면에 표시가 되지 않았다.
• dispatch로 새로 생성된 아이템을 store의 reducer로 넘겨줘야한다.
• useDispatch의 기능이 특정 아이템을 reducer로 넘겨주는 것이다.
• 여기서 dispatch를 통해 addTodo (action creator) 로 넘어오고, type과 payload에 따라 state를 변경해준다.

 const dispatch = useDispatch();
///---코드 생략----///
dispatch(addTodo({ ...todo, id }));

2. 추가하기 버튼 클릭 후 기존에 존재하던 아이템들이 사라짐.

• 추가하기 action을 통해 action.payload값이 넘어 왔지만 기존 아이템들을 그대로 두지 않고 바로 todos에 넣어줬기 때문에 기존 아이템들이 사라지게 된 것이다.
• 밑의 코드처럼 기존 state.todos를 스프레드 문법으로 받아오고, action.payload를 추가해줬다.

///변경 전
const todos = (state = initialState, action) => {
	switch (action.type) {
        case ADD_TODO:
return {
		...state,
		todos: [action.payload],
		};

///변경 후
return {
		...state,
		todos: [...state.todos, action.payload],
		};

3. 삭제 기능이 동작하지 않음.

• action value ,action creator는 선언 되어 있으나 reducer쪽에 case가 지정이 되지 않아서 작동하지 않았다.
• case에 type을 추가해주고, todos에서 해당 todo.id와 payload로 넘어온 id값이 일치 하지 않는 아이템만 filter로 새로운 todos를 만들었다.

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

4. 상세 페이지에 진입 하였을 때 데이터가 업데이트 되지 않음.

• todo 리스트에 id값이 전달이 안되어 데이터가 업데이트 되지 않았다.
• useParam를 통해 얻은 todo.id페이지 파라미터를 id값으로 받아오고, dipathch로 getTodobyId()(action creator)에 id를 전달해준다.
• 파라미터가 dipatch로 전달될 때만 실행 될 수 있도록 useEffect를 사용해준다.
• 해당 id와 todos의 id와 일치하는 것을 찾아서 todo리스트에 넣어준다.
• todo의 리스트를 useSelector를 통해서 가져온다.
• 이렇게 되면 상세페이지에 해당 아이템이 보여진다.

const dispatch = useDispatch();
const todo = useSelector((state) => state.todos.todo);

const { id } = useParams();
const navigate = useNavigate();

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

5. 완료된 카드의 상세 페이지에 진입 하였을 때 올바른 데이터를 불러오지 못함.

• 완료 된 카드의 상세보기 Link에 연결된 부분이 index로 되어 있었다.
• index값은 데이터가 추가되고, 지워질 때마다 변하는 값이기 때문에 고정값이 될 수 없어 올바른 데이터를 불러오지 못한다.
• index부분을 todo.id로 아래 코드처럼 변경했다.

///변경 전
<StLink to={`/${index}`} key={todo.id}>
	<div>상세보기</div>                                </StLink>

///변경 후 
<StLink to={`/${todo.id}`} key={todo.id}>
	<div>상세보기</div>                                </StLink>

6. 취소 버튼 클릭시 기능이 작동하지 않음.

• 취소 버튼 클릭시 id값이 전달이 되어야 해당 id의 isDone을 변경해주는데 id값이 전달이 되지 않아 기능이 작동하지 않았다.

///변경 전
onClick={onToggleStatusTodo}

///변경 후
onClick={() => onToggleStatusTodo(todo.id)}

7. 배포 url

https://todolist-redux-assignment-kth.vercel.app/