React로 to Do list를 만들어보도록 하겠습니다.
일단 to Do를 입력할 form을 만들어줍니다.
function App(){
return (
<div>
<form onSubmit={onSubmit}>
<input onChange={onChange} value={toDo} type="text" placeholder="할 일을 입력하세요" />
<button>할 일 추가하기</button>
</form>
</div>
)
}input 태그를 활용하기 위해서는 state값을 만들고 onChange 이벤트를 넣어줘야 한다는 것을 우리는 이미 알고있습니다.
toDo 변수는 state로 만들어 줘야하고 onChange값으로 setTodo 안에 event.target.value 값을 넣어주도록 합니다.
function App(){
const [toDo, setTodo] = useState("")
const onChange = (event) => {
setTodo(event.target.value)
}
return (
<div>
<form onSubmit={onSubmit}>
<input onChange={onChange} value={toDo} type="text" placeholder="할 일을 입력하세요" />
<button>할 일 추가하기</button>
</form>
</div>
)
}이번엔 버튼을 누르면 동작할 Submit이벤트를 정의해주도록 합니다.
submit이벤트는 default로 새로고침을 하기 때문에 preventDefault를 사용해주어야 합니다.
function App(){
const [toDo, setTodo] = useState("")
const onChange = (event) => {
setTodo(event.target.value);
}
const onSubmit = (event) => {
event.preventDefault();
if(toDo == ""){
return;
}
}
return (
<div>
<form onSubmit={onSubmit}>
<input onChange={onChange} value={toDo} type="text" placeholder="할 일을 입력하세요" />
<button>할 일 추가하기</button>
</form>
</div>
)
}그리고 toDo가 비어있을 경우에는 Submit함수가 동작되지 않게 하기 위해 if문 하나를 추가로 넣어줍니다.
우리는 to Do list를 만들거지 to Do 하나만 만들고 싶은 것이 아닙니다.
그렇기에 to Do의 list가 필요합니다.
to Do들을 가지고 있는 list를 다시 한 번 state로 만들어줍니다.
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;
}
}
return (
<div>
<form onSubmit={onSubmit}>
<input onChange={onChange} value={toDo} type="text" placeholder="할 일을 입력하세요" />
<button>할 일 추가하기</button>
</form>
</div>
)
}이제 setTodos 안에 toDo 값들을 추가해주면 됩니다.
하지만 toDo값들로 바꾸는 것이 아니라 '추가' 해주어야 하기 때문에 toDos에 현재 저장되어 있는 값들도 계속 가지고와야만 합니다.
그렇기에 '...' 를 활용해보려고 합니다.
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((cuurentTodos)=>{
return [toDo, ...currentTodos];
})
setTodo("");
}
console.log(todos);
return (
<div>
<form onSubmit={onSubmit}>
<input onChange={onChange} value={toDo} type="text" placeholder="할 일을 입력하세요" />
<button>할 일 추가하기</button>
</form>
</div>
)
}위와 같이 setTodos에는 toDo와 기존에 있던 toDos의 값들을 넣어줄겁니다.
그리고 toDo는 초기화를 해주어야겠죠.
버튼을 누르고 나서도 계속 input창에 텍스트가 띄어져있으면 안되니까요.
그리고나서 console.log(toDos)를 출력해보면?
input값에 입력했던 toDo 값들이 잘 들어가는 것을 확인할 수 있습니다.
이제 이 list들을 출력해보도록 합시다.
javascript의 map함수를 사용하면 손 쉽게 이 배열에 있는 값들을 출력할 수 있습니다.
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((cuurentTodos)=>{
return [toDo, ...currentTodos];
})
setTodo("");
}
console.log(todos);
return (
<div>
<form onSubmit={onSubmit}>
<input onChange={onChange} value={toDo} type="text" placeholder="할 일을 입력하세요" />
<button>할 일 추가하기</button>
</form>
<ul>
{toDos.map((item)=><li key={index}>{item}</li>)}
</ul>
</div>
)
}자바스크립트 문법을 사용해야 하니 {} 안에 작성을 해주도록 하고,
ul태그를 만들어서 li태그들을 만들어줍니다.
li태그는 map함수를 이용해 list값에 있는 item들을 하나씩 꺼내주면서 작동을 시킵니다.
