2022.12.20 Redux Todo List 만들기 #2

3. 삭제와 완료 구현하기

<todos.js>

import { v4 as uuidv4 } from "uuid";

const ADD_TODO = "ADD_TODO";
const REMOVE_TODO = "REMOVE_TODO";
const SWITCH_TODO = "SWITCH_TODO";

export const addTodo = (payload) => {
  return {
    type: ADD_TODO,
    payload,
  };
};

export const removeTodo = (payload) => {
  return {
    type: REMOVE_TODO,
    payload,
  };
};
export const switchTodo = (payload) => {
  return {
    type: SWITCH_TODO,
    payload,
  };
};

const initialState = [
  {
    id: uuidv4(),
    title: "리덕스 마스터 하기",
    contents: "열심히 복습해보기",
    isDone: false,
  },
  {
    id: uuidv4(),
    title: "육아 하기",
    contents: "분유 주고 목욕 시키기",
    isDone: true,
  },
  {
    id: uuidv4(),
    title: "TodoList 완성 하기",
    contents: "리덕스 이용하기",
    isDone: false,
  },
];

const todos = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    case REMOVE_TODO:
      return state.filter((item) => item.id !== action.payload);
    case SWITCH_TODO:
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    default:
      return state;
  }
};

export default todos;

todos.js에 REMOVE_TODO와 SWITH_TODO를 만들어준다.

REMOVE_TODO 같은 경우는 필터를 걸어 현재의 item.id와 내가 클릭한 값이 다른 것들만 필터를 해서 보여주게 만들어준다.

클릭한 값을 ID로 구분하여 삭제하는 것이다.

<TodoList.jsx>

import React from "react";
import { useSelector } from "react-redux";
import styled from "styled-components";
import Todo from "./Todo";

function TodoList({ isActive }) {
  const todos = useSelector((state) => state.todos);

  return (
    <StyledTodoList>
      <StyledTodoHeader>
        {isActive === true ? "진행중🙅‍♂️" : "완료🙆‍♂️"}
      </StyledTodoHeader>

      {todos
        .filter((item) => item.isDone === !isActive)
        .map((item) => {
          return <Todo key={item.id} todo={item} isActive={isActive} />;
        })}
    </StyledTodoList>
  );
}

export default TodoList;

const StyledTodoList = styled.div``;

const StyledTodoHeader = styled.div`
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 30px;
  text-align: center;
  color: #339af0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
`;

원래 한 곳에 하려고 했는데 에러가 발생해서 리스트가 출력되는 부분을 Todo.jsx를 추가해서 따로 나눴다.

todolist.jsx:12 uncaught typeerror: cannot read properties of undefined (reading 'id') 에러가 뜨는데 key 값도 정상으로 넣었는데 이런 에러가 떠서 원인을 찾아봤는데 정확한 증상이 나오지 않아서 그냥 하위 컴포넌트를 만들어서 진행하니 정상적으로 진행이 됐다.

<Todo.jsx>

import React from "react";
import { useDispatch } from "react-redux";
import { removeTodo, switchTodo } from "../redux/modules/todos";
import styled from "styled-components";

function Todo({ todo, isActive }) {
  const dispatch = useDispatch();
  const handleSwitchButton = () => dispatch(switchTodo(todo.id));
  const handleRemoveButton = () => {
    dispatch(removeTodo(todo.id));
  };
  return (
    <Styleddiv>
      <StyledTodoListBox>
        <StyledTitle>{todo.title}</StyledTitle>
        <StyledContent>{todo.contents}</StyledContent>
        <Styledbutton onClick={handleSwitchButton}>
          {isActive ? "⭕" : "⛔"}
        </Styledbutton>
        <Styledbutton onClick={handleRemoveButton}>❌</Styledbutton>
      </StyledTodoListBox>
    </Styleddiv>
  );
}

export default Todo;

const Styleddiv = styled.div`
  display: inline-block;
`;

const StyledTodoListBox = styled.div`
  padding: 30px 20px 30px 20px;
  width: 190px;
  margin: 5px;
  background-color: #e7f5ff;
  border-radius: 20px;
  text-align: center;
`;

const StyledTitle = styled.div`
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  font-family: Arial, Helvetica, sans-serif;
`;
const Styledbutton = styled.button`
  cursor: pointer;
  margin-top: 8px;
  font-size: 25px;
  border: none;
  background-color: #e7f5ff;
`;
const StyledContent = styled.div`
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
`;

handle만들어 앞에 만들었던 삭제와 완료 기능을 onClick에 넣어주면 끝이다.

삭제 기능과 진행중에서 완료 이동, 완료에서 진행중 이동도 이상 없이 작동하는 것을 확인했다.

중간에 에러 때문에 세시간은 잡아먹은 것 같다.

다음 시간에는 react-router-dom part에 대해 공부해봐야 겠다.

---