nomad code_react js로 영화앱 만들기_#7.0(To Do List part One)
2022. 11. 16. 16:58ㆍreact
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(); // form 안의 button 기본값인 submit이벤트 차단
if(toDo === ""){ // toDo(input)에 아무것도 입력되지 않았으면
return; // 아무것도 실행하지 않고 빠져나옴
};
setToDos(currentArray => [toDos, ...cruuentArray]); // 기존 배열에 추가로 값을 넣는 법
setToDo(""); // toDo(input)의 값 초기화
};
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"
/>
</form>
</div>
);
};
export default App;
hi, bye, ok를 입력하고 버튼을 클릭하면 다음과 같이 콘솔에 출력된다.
'react' 카테고리의 다른 글
react) scroll event _ getBoundingClientRect() 사용해서 toggle class 적용하기 (0) | 2023.01.02 |
---|---|
react에서 fontawesome 사용하기 (0) | 2022.11.24 |
nomad code_react js로 영화앱 만들기_#6.4(Cleanup) (0) | 2022.11.16 |
nomad code_react js로 영화앱 만들기_#6.1 ~ 6.3 (0) | 2022.11.16 |
nomad code_react js로 영화앱 만들기_#5.1 (0) | 2022.11.15 |