- array를 직접적으로 수정하지 않으면서 setToDos로 array에 element를 추가하는 방법
import { useEffect, useState } 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;
}
setToDos((currentArray) => [toDo, ...currentArray]);
setToDo("");
};
console.log(toDos);
return (
<div>
<h1>My To Dos ({toDos.length})</h1>
<form onSubmit={onSubmit}>
<input onChange={onChange} value={toDo} type="text" placeholder="Write your to do.." />
<button>Add To Do</button> {/*버튼이 클릭됐을때 form을 submit*/}
</form>
</div>
);
}
export default App;
'리액트 기기기초' 카테고리의 다른 글
#7.2 Coin Tracker (0) | 2023.03.11 |
---|---|
#7.1 To Do List part Two (0) | 2023.03.11 |
#6.4 Cleanup (0) | 2023.03.10 |
#6.3 Recap (0) | 2023.03.10 |
#6.2 Deps (0) | 2023.03.10 |