이번에 외운 함수는 리액트로 만든 투두리스트입니다.
기능
- input 창에 글자를 입력하면 onChange된 내용을 감지한다.
- add 버튼을 누르면 toDos 배열에 저장되고 저장된 개수를 h1에서 확인할 수 있다.
코드
<!DOCTYPE html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
const [toDo, setToDo] = React.useState("");
const [toDos, setToDos] = React.useState([]);
const onChange = (e) => setToDo(e.target.value);
const onSubmit = (e) => {
e.preventDefault();
if (toDo === "") return;
setToDos( (currentArray) => [toDo, ...currentArray]);
setToDo("");
}
console.log(toDos);
return (
<div>
<h1>to do list ({toDos.length})</h1>
<form onSubmit={onSubmit}>
<input
type="text"
value={toDo}
onChange={onChange}
placeholder="write your to do list"
/>
<button>add</button>
</form>
</div>
)
}
const root = document.getElementById('root');
ReactDOM.render (<App/>, root);
</script>
</html>
냅다 외우고 써보기
참고로 녹화를 끝내고 실행해봤더니 length에 오타가 있어서 실행이 안됐다... 오타 조심
정리
Event.preventDefault()
어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다. 라고 하는데 읽어도 동작하는 방법이 이해되지 않는다.
예제에서 쓰인 이유는 form 태그 안에서 <button> type이 'submit'인데 실행하게 되면 창이 새로고침이 된다. 그때 preventDefault ()가 새로고침되는 것을 막아주면서 submit은 된다.
반응형
'TIL' 카테고리의 다른 글
| 프로젝트 회고 2 :: 기능부터 컨벤션까지 정해야 할게 너무 많아요. (0) | 2022.07.06 |
|---|---|
| 프로젝트 회고 1 :: 프론트엔드 프로젝트는 어떻게 해야하죠? (0) | 2022.06.30 |
| 냅다 함수 :: React로 시계 만들기 (0) | 2022.06.22 |
| 냅다 외우기 :: [JS] 소수판별 (0) | 2022.06.20 |
| 발표 절대 못 한다던 내가 첫 연사를 마친 소감 (0) | 2022.06.09 |