import { useState } from "react";
import TodoItem from "./TodoItem";
function TodoList(){
const [todoList, setTodoList] = useState([]);
const[inputValue,setInputValue] = useState('');
const todoItem = () =>{
setTodoList([...todoList, inputValue]);
setInputValue('');
}
return(
<>
<div className="todo-btn">
<input type="text" value={inputValue} onChange={((e)=> setInputValue(e.target.value))} placeholder="할 일을 입력해주세요."/>
<button onClick={todoItem}>제출</button>
</div>
<br />
<div>
<TodoItem todoList={todoList}/>
</div>
</>
)
}
export default TodoList;
import TodoList from "./TodoList";
import TodoListItem from "./TodoListItem";
function TodoItem(props){
return(
<div>
{props.todoList.map((item)=><TodoListItem item={item}/>)}
</div>
)
}
export default TodoItem;
function TodoListItem(props){
return(
<div>
{props.item}
</div>
)
}
export default TodoListItem;