To DO List 만들기
먼저 form을 만들고 그 안에input과 버튼을 만들어 보자.
<div>
<form>
<input type="text"
placeholder="Write your to do"></input>
<button>Add To Do</button>
</form>
</div>form 에는 onSubmit 기능을
input 에는 onChange 기능을 넣어주자.
const [toDo, setToDo] = useState("");
const onChange = (e) => setToDo(e.target.value);
const onSubmit = (e) => {
e.preventDefault();
if(toDo ===""){
return;
}
setToDo("");submit 에는 새로고침 되는 기능을 없애고 공백일 경우에 반응이 없도록 만들었고 submit된 후에는 공백으로 변환하게 끔 작성 하였다.
<div>
<form onSubmit={onSubmit}>
<input onChange={onChange}
value ={toDo}type="text"
placeholder="Write your to do"></input>
<button>Add To Do</button>
</form>
</div>
);jsx에는 그냥 넣어주기만 하면 끝
submit 할 때마다 여러개의 데이터를 받고 싶다면 Array형식의 useState를 만들어 보자.
//useState생성
const [toDos, setToDos] = useState([]);
setToDos((currArray) => [toDo, ...currArray]);useState를 Array로 받아주게 생성한 뒤,
현재 array에 toDo(state)를 추가해 주는 함수를 만들었다.
jsx로 h1태그에 toDos의 길이를 알수있는 코드를 넣고 전체코드를 살펴보자.
import { useState } from "react";
function App() {
const [toDo, setToDo] = useState("");
const [toDos, setToDos] = useState([]);
const onChange = (e) => setToDo(e.target.value);
const onSubmit = (e) => {
e.preventDefault();
if(toDo ===""){
return;
}
setToDo("");
setToDos((currArray) => [toDo, ...currArray]);
};
return (
<div>
<h1>My To Dos ({toDos.length})</h1>
<form onSubmit={onSubmit}>
<input onChange={onChange}
value ={toDo}type="text"
placeholder="Write your to do"></input>
<button>Add To Do</button>
</form>
</div>
);
}
export default App;
javascript로 구현해 보기
<body>
<h1>My To Dos</h1>
<form>
<input required placeholder="write your..." type="text">
<button>Add To Do</button>
</form>
<script>
const head = document.querySelector("h1");
const input = document.querySelector("input");
const form = document.querySelector("form");
const inputArr = []
function handleSubmit(e) {
e.preventDefault();
setInterval(handleHead)
inputArr.push(input.value)
input.value = "";
}
const handleHead = (() => {
head.innerText = `My To Dos (${inputArr.length})`
})
input.addEventListener("change", handleHead);
form.addEventListener("submit", handleSubmit);
</script>
</body>
</html>공백입력 받을 때 react처럼 return을 줘도 멈추지 않아 그냥 input에 required를 넣어주었다..
리스트 추가하기
받은 value값을 리스트에 추가하는 기능을 만들어 보자.
Array에 받은 value를 map을 사용하여 추가한다.
<ul>
{toDos.map((item,index)=>
<li key={index}>{item}</li>)}
</ul>map의 파라미터 첫번째는 value, 두번째는 index를 넣어 값을 넣는다.
javscript 로도 작성해 보자
inputArr = []
function handleSubmit(e) {
e.preventDefault();
setInterval(handleHead)
inputArr.push(input.value)
const addList = document.createElement('li')
addList.innerText = input.value
ul.appendChild(addList)
input.value = "";
}li를 추가하는 것 까진 가능했는데 map으로 전환시켜 value를 뽑는 방식을 찾다가 결국 포기했다...
아직 자료구조의 대해 이해를 잘 못하는거 같다.😇
개발 옹알이 부터