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는 안할거임 ㅎ;)
Author And Source
이 문제에 관하여(Toy project (TS) : Todo List 3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@j_user0719/Toy-project-TS-Todo-List-3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)