Todo Input에서 input값 가져와서 App에 update하기.

✨ Todo Update

1. Input value값 설정

//TodoInput.tsx
import React, { useState } from "react";
const TodoInput: React.FC = () => {
  const [input, setInput] = useState("");
  const handleClick = () => {
    console.log(input);
    setInput("");
  };
  return (
    <div className="inputBox">
      <input
        type="text"
        onChange={(e) => setInput(e.target.value)}
        value={input}
      />
      <button onClick={handleClick}>Add Todo</button>
    </div>
  );
};
export default TodoInput;

2 . App.tsx에서 Update 함수 만들기 & type 설정

//App.tsx
{...생략}
  const updateTodo: UpdateTodo = (value) => {
    if (value === "") {
      alert("값을 입력해주세요");
    } else {
      setTodos([...todos, { text: value, completed: false }]);
    }
  };
  {...생략}

타입 설정하기

//type.d.ts
type UpdateTodo = (value: string) => avoid;

3. UserListItem에 삭제버튼 만들기 & App.tsx에 DeleteTodo 함수 만들기

react-icons는 타입스크립트 지원안함.. Native 만 지원해서 FontAwesome을 사용하기로함.

1. FontAwesome 사용해서 삭제 아이콘 넣기

▪ 설치

공홈 사이트 : https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

fortawesome 주의!!!!!!!!!!!!!

▪ Icon.tsx 생성 => 아이콘도 타입을 정해주어야 합니다!!

//Icon.tsx
import {
  IconLookup,
  IconDefinition,
  findIconDefinition,
} from "@fortawesome/fontawesome-svg-core";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
library.add(fas);
const trashLookup: IconLookup = { prefix: "fas", iconName: "trash" };
export const trashIconDefinition: IconDefinition =
  findIconDefinition(trashLookup);

Tip : https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react [폰트어썸 사용하는 꿀팁 / prefix]

2. deleteTodo 함수 만들기

 //App.tsx
   const deleteTodo: DeleteTodo = (selected) => {
    setTodos(todos.filter((todo) => todo.text !== selected.text));
  };

type 설정하기.

 //types.d.ts
 type DeleteTodo = (selected: Todo) => avoid;

4 . initialTodo 빈 배열로 바꾸기

 const initialTodo: Array<Todo> = [];
 const App: React.FC = () => {
  const [todos, setTodos] = useState(initialTodo);
  {...생략}
  }

Tip: state에서 바로 타입설정 불가함. 변수로 빼서 타입 설정해주고 state 초기값으로 넣어야 함.

완성!!!!

Todo Update!

Todo Completed && Delete