React - 6 ToDoList

import { useState, useEffect } from "react";

function App() {

const [toDo, setToDo] = useState("");

const [toDos, setToDos] = useState([]);

const onChange = (event) => setToDo(event.target.value);

const onSubmit = (event) => {

event.preventDefault();

if (toDo === "") {

return;

}

// 중요!!!! state를 절대 직접 수정하지 않고, 함수로 수정

// 그러니 toDo ="";는 절대 안되고 아래처럼

setToDos((currentArray) => [toDo, ...currentArray]);

setToDo("");

};

console.log(toDos);

return (

<div>

<form onSubmit={onSubmit}>

<input

onChange={onChange}

value={toDo}

type="text"

placeholder="Write your to do..."

/>

<button>Add To Do </button>

</form>

<hr />

{toDos.map((item, index) => (

<li key={index}>{item}</li>

))}

</div>

);

}

export default App;