$$config title: [제작] 앱구현 - 화면에 작성하는 내용 DB에 반영하는 방법 keywords: - onSubmit $$ # 화면에 작성하는 내용 DB에 반영하는 방법 Δ TIP : "datetime-local"을 사용하면 날짜와 시간관련된 설정을 달력형식으로 클릭하여 선택할 수 있다. Δ form - 입력상자들의 묶음 Δ [코드펜](https://codepen.io/SeonHo-/pen/jOZYxLx?editors=0010) ```js function App() { const [todos, setTodos] = useState([]); const reloadList = async [fetch관련 함수] . + . useEffect(reloadList, []); 4-2. 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(); }; 3-2 . const onSubmit = (e) => { e.preventDefault(); const form = e.target; if (form.performDate.value.length == 0) { alert("수행날짜를 입력해주세요."); form.performDate.focus(); return; } const performDate = form.performDate.value.replace("T", " ") + ":00"; . + . 4-1. addTodo(performDate, content); }; return ( <> . + . 1. 3-1. . + . ); ``` 1 . form 생성 : 입력상자를 묶어주기 위해 생성 2 . input type = "submit" - 만약 form안에 input type이 "submit"인게 있다면 클릭 시 발송이 됨 3 . onSubmit - form onSubmit={onSubmit} : 작성이 클릭될때 submit을 발송, 발송하기 전에 onSubmit을 실행한 뒤 발송 - const onSubmit = (e) => { e.preventDefault(); const form = e.target;} * 해당코드가 내부적으로 e[이벤트] 값을 받아서 실행 * e.preventDefault(); : 원래 onSubmit가 실행되면 페이지가 새로 생성되면서 이동하지만, 그 기능을 해당 코드를 통해 막음(페이지 이동X) - const form = e.target; : 이벤트의 중심이 되는 form객체를 form 변수에 넣는다. - const performDate = form.performDate.value.replace("T", " ") + ":00"; * form -> input에 있는 performDate의 값을 performDate에 넣는다. * .replace("T", " ") + ":00"; : datetime을 실행할때 나오는 T와 같이 쓸모없는 값을 없앰, 더 깔끔한 결과를 볼 수 있음 - if (form.performDate.value.length == 0) {alert("수행날짜를 입력해주세요."); form.performDate.focus(); return; } * 만약 날짜 관련 값을 입력하지 않았을때 메세지를 출력하고 날짜칸에 커서 포커스를 맞춘다. 4 . 매개변수 ```js [4번과 비슷한 유형 예시] const addTodo = async () => { fetch(`http://localhost:3000/${userCode}/todos`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ perform_date: "2022-12-12 12:12:12", content: "운동하기" }) ``` - fetch에 매개변수를 넣어 body안에 연결시킨다. - 원래 body에서 " 객체 : 데이터값"으로 입력하지만 객체와 데이터값의 이름이 동일할 때 4번과 같이 "perform_date"라고만 써도 된다.

게시글 상세