Toy project (TS) : Todo List 3

input 을 통해 동적으로 Todo list의 새로운 항목을 만들 수 있도록 해야한다. 그래서 새로운 AddTodo 컴포넌트를 추가해주도록 하자.

AddTodo.tsx

import React, { ChangeEvent, FormEvent, useState } from 'react';
import { AddTodoType } from '../types';

interface AddTodoProps {
    addTodo : AddTodoType;
}

export const AddTodo: React.FC<AddTodoProps> = ({addTodo}) =>{
    const [newTodo,setNewTodo] = useState("");

    const handleChage = (e:ChangeEvent<HTMLInputElement>) =>{
        setNewTodo(e.target.value);
    }
    const handleSubmit = (e: FormEvent<HTMLButtonElement>) => {
        e.preventDefault();
        addTodo(newTodo);
        setNewTodo("");
    }

    return( 
    <form>
        <input placeholder="input to do" type ="text" value={newTodo} onChange={handleChage}/>
        <button type= "submit" onClick = {handleSubmit}>Add Todo</button>
    </form>)
}

<input value={newTodo} onChange={handleChage}/>을 통해서 새로운 항목 text를 저장하고,
<button type= "submit" onClick = {handleSubmit}> 버튼으로 먼저 e.preventDefault();로 form 태그에 쌓여 있기 때문에 다른 곳에 전송할 필요가 없기 때문에 자동으로 submit하는 기능을 멈춰준다.
그 후 새로운 newTodo를 추가해주고 리셋 시켜준다.

App.tsx

import React, { useState } from 'react';
import { AddTodo } from './components/AddTodo';
import { TodoItemCard } from './components/TodoItemCard'
import { TodoList } from './components/Todolist';
import {Todo , HandleTodo, AddTodoType} from './types'

const dummyTodos : Array<Todo> = [{text : "pop a pill ", complete : true}, {text : "eat dinner ", complete : false}]

const App : React.FC = () => {
  const [todos , setTodos] = useState(dummyTodos);
  
  const handleTodo : HandleTodo = selectedTodo =>{
    const newTodos = todos.map((todo) =>{
      if (todo === selectedTodo)
      {
        return { ...todo, complete: !todo.complete }
      }
      return todo;
    });
    setTodos(newTodos)
  }
//그에 걸맞게 제일 상위 컴포넌트에서 함수 추가.
  const addTodo: AddTodoType = (newTodo ) => {
  	// 항목이 비어있으면 동작하지 않게,
    newTodo.trim() !== "" &&
    // todos type에 맞게 추가.
    setTodos([...todos,{text :newTodo, complete: false}])
  }

  return (
    <>
      <TodoList todos={todos} handleTodo = {handleTodo}/>
      <AddTodo addTodo ={addTodo}/>
    </>
  );
}

export default App;

완성! (css는 안할거임 ㅎ;)