우리가 입력을 받을 때 보통 html에서 form 태그를 선언하고 그 안에 input 태그를 넣기도 하고 button 태그를 넣기도 합니다.
import type { NextPage } from "next";
import { useRouter } from "next/router";
import React from "react";
import styled from "styled-components";
const Container = styled.div`
color: ${({ theme: { colors } }) => colors.pointColor};
text-align: center;
font-size: 24px;
`;
const Form = styled.form``;
const Input = styled.input``;
const Button = styled.button`
& + & {
margin-left: 20px;
}
`;
const Home: NextPage = () => {
const router = useRouter();
const goBack = () => {
console.log("go back!");
};
const save = () => {
console.log("save");
};
const onSubmit = (e: React.SyntheticEvent) => {
e.preventDefault();
console.log("submit");
};
return (
<Container>
<Form onSubmit={onSubmit}>
<div>
<label htmlFor="name">이름</label>
<Input type="text" name="name" />
</div>
<div>
<label htmlFor="school">학교</label>
<Input type={"text"} name="school" />
</div>
<Button onClick={goBack}>뒤로 가기</Button>
<Button onClick={save}>저장</Button>
</Form>
</Container>
);
};
export default Home;
이것은 Next.js와 typescript, styled-components로 비슷한 상황을 나타낸 코드입니다.
jsx 부분을 주목해주세요. (html 코드처럼 생긴 부분)
위와 같이 화면에 보여질 것입니다.
여기서 이름과 학교를 입력 후 엔터를 누르면 onSubmit만 동작할까요?
아닙니다.
이는 이벤트 발생시 실행할 동작을 의도와 다르게 하기 때문에 반드시 수정해야 합니다.
고치는 방법은 다음과 같습니다.
만약, onClick만 남긴다고 할 때에는
<form onSubmit={(e) => e.preventDefault()}>
...
이렇게 preventDefault 처리를 해주어야 페이지가 자동으로 새로고침되지 않습니다.
저의 경우에는 onSubmit을 살리는 방향으로 하였습니다.
...
const goBack = () => {
console.log("go back!");
};
const onSubmit = (e: React.SyntheticEvent) => {
e.preventDefault();
console.log("submit");
};
return (
<Container>
<Form onSubmit={onSubmit}>
<div>
<label htmlFor="name">이름</label>
<Input type="text" name="name" />
</div>
<div>
<label htmlFor="school">학교</label>
<Input type={"text"} name="school" />
</div>
<Button type="button" onClick={goBack}>
뒤로 가기
</Button>
<Button type="submit">저장</Button>
</Form>
</Container>
);
이렇게 하면 이름, 학교를 다 입력하고 엔터를 눌러도 onSubmit 함수만 동작하고 저장 버튼을 눌러도 onSubmit 함수만 동작하게 됩니다.