❗ 발견한 버그는 총 3개입니다.

1. 삭제 버튼 클릭 시 삭제되지 않음.
2. 삭제 후 TodoItem 생성 시 key 중복 발생
3. 페이지 TodoItem 로딩 후 TodoItem 생성 시 key 중복 발생

🎯 삭제 버튼 클릭 시 TodoItem 제거하기

• 먼저 삭제 버튼 클릭 시에 삭제할 item의 id를 removeTodo함수의 인자로 넘겨줍니다.

// TodoItem.tsx
const TodoItem = ({ toggleTodo, removeTodo, todo }: TodoItemProps) => {
  const { id, text, done, startDate, deadline } = todo;

  const handleRemove = useCallback((id) => {
    removeTodo(id);
  }, []);

  return (
    <TodoItemBlock>
      <Remove onClick={() => handleRemove(id)}>
        <DeleteOutlined />
      </Remove>
    </TodoItemBlock>
  );
};

• setTodoState를 이용해 불변성을 유지하고, filter 메소드를 통해 선택된 id를 가진 item을 제거합니다.

// useTodo.tsx
const removeTodo = (id: number) => {
    setTodoState((prevState) => prevState.filter((todo: Itodo) => todo.id !== id));
  };

🎯 삭제 후 Item 생성 시 key 중복 발생 버그

• id를 배열의 총 길이를 이용해 사용해서 발생한 버그입니다. 언제든지 변할 수 있는 배열의 길이가 아닌 마지막 Item의 id를 이용합니다.
• nextIdState state를 이용합니다. Item 생성 시 incrementNextId 함수를 이용해 1씩 증가시키고 증가된 Id를 이용해 Item을 생성합니다.

// TodoCreate.tsx
// 생성 버튼 클릭
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    incrementNextId(); // nextId 하나 증가

		createTodo({
      id: nextId,
      text: value,
      done: false,
      startDate,
      deadline,
    }
  };

// useTodo
const [nextIdState, setNextIdState] = useState(0);

const incrementNextId = () => {
    setNextIdState(nextIdState + 1);
  };

const createTodo = (todo: Itodo) => {
    const nextId = nextIdState;
    setTodoState((prevState) =>
      prevState.concat({
        ...todo,
      }),
    );
  };

🎯 페이지 TodoItem 로딩 후 TodoItem 생성 시 key 중복 발생 버그

• 페이지를 새로고침하거나 처음 들어갈 때 nextIdState state가 초기화돼서 발생하는 버그입니다. todoState를 localStorage에 저장하는 것처럼, 마지막 nextIdState를 localStorage에 저장합니다.