$$config title: [제작] 앱구현 - NewTodoForm, TodoList 컴포넌트 keywords: - 컴포넌트 $$ [예시](https://codepen.io/SeonHo-/pen/yLvqqbG?editors=0010) # 사용이유 : 폼을 사용하여 컴포넌트를 만드는 과정을 통헤 크롬 알림창을 제작할 수 있다. # 코드 ```js . * . const addTodo = async (perform_date, content) => { await fetch(`http://localhost:3000/${userCode}/todos`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ perform_date, content }) }); await reloadList(); }; --------------------------- return ( <>

2 - 2 . 1 - 2 .

); } ----------------------------- 2 - 1 . function NewTodoForm({ addTodo }) { const onSubmit = (e) => { e.preventDefault(); const form = e.target; 3 - 1 . if (form.performDate.value.length == 0) { alert("수행날짜를 입력해주세요."); form.performDate.focus(); return; } ---------------------- const performDate = form.performDate.value.replace("T", " ") + ":00"; ---------------------- form.content.value = form.content.value.trim(); ---------------------- 3 - 2 . if (form.content.value.length == 0) { alert("할일을 입력해주세요."); form.content.focus(); return; } ---------------------- const content = form.content.value; addTodo(performDate, content); form.content.value = ""; form.content.focus(); }; ----------------------- . * . ---------------------- 1 - 1 . function TodoList({ todos }) { return (

{todo.no} : {todo.content}

); } ReactDOM.render(, document.getElementById("root")); ``` 0 . 한 공간에 코드가 너무 많이 들어가야한다면, 함수를 통해 간략화를 해줄 수 있다. EX( 1번 ) 1 . 값이 들어오면 해당 함수에 집어넣어 리스트형식으로 만드는 것 2 . 할일 생성 폼을 생성하고 onSubmit 실행 3 . 만약 일자와 내용을 입력하지 않는다면 알림창을 띄우고 일자/내용입력란에 마우스 포커스를 맞추는것 - alert("내용입력") : 해당 명령어를 통해 알림창을 띄울 수 있다. - form.~.fous() : 해당 명령어 실행 시 마우스를 지정한곳으로 포커스를 맞출 수 있다.