input 태그에서 엔터 입력시 다르게 동작할 때 살펴봐야 할 점

우리가 입력을 받을 때 보통 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만 동작할까요?

아닙니다.

뒤로 가기 버튼을 클릭했을 때의 이벤트가 onSubmit 함수와 함께 실행되고 있습니다.

이것은 form에서 input과 button을 함께 썼을 때 나타나는 전형적인 에러입니다.

button에 type을 지정해주지 않았을 때 엔터 이벤트가 발생되면 form 안에서 가장 먼저 선언된 button의 onClick가 실행되는 것입니다.

이는 이벤트 발생시 실행할 동작을 의도와 다르게 하기 때문에 반드시 수정해야 합니다.

고치는 방법은 다음과 같습니다.

1. 엔터시 작동할 button에는 type="submit"를, 작동하지 않을 button에는 type="button"을 지정해줍니다.
2. 이렇게 되면 이제 엔터 입력시 type이 submit인 button의 onClick 함수가 엔터 입력시 onSubmit과 함께 실행될 것입니다.
3. 이제 onSubmit으로 할 지, 아니면 onClick으로 할 지 둘 중 하나만 남겨주면 됩니다.

만약, 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 함수만 동작하게 됩니다.