submit 이벤트 발생시 reload 새로고침 발생

이슈

로그인 페이지를 작성 하는 도중 유저 이름과 패스워드 텍스트 입력후 버튼을 눌러 콘솔을 살펴보니 value가 번쩍하더니 사라졌고 html에서도 텍스트 초기화가 되었다.

코드 내용은 아래와 같다. 문제가 없어 보였다.

import React from "react";
import { Container, Grid, Typography, TextField, Button } from "@mui/material";
import { signin } from "./service/ApiService";

const Login = () => {
  const handleSubmit = (event) => {
		...
  };

  return (
    <Container component="main" maxWidth="xs" style={{ marginTop: "8%" }}>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Typography component="h1" variant="h5">
            로그인
          </Typography>
        </Grid>
      </Grid>
      <form noValidate onSubmit={handleSubmit}>
        {" "}
        {/* submit 버튼을 누르면 handleSubmit이 실행됨. */}
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <TextField
              variant="outlined"
              required
              fullWidth
              id="username"
              label="아이디"
              name="username"
              autoComplete="username"
            />
          </Grid>
          <Grid item xs={12}>
            <TextField
              variant="outlined"
              required
              fullWidth
              name="password"
              label="패스워드"
              type="password"
              id="password"
              autoComplete="current-password"
            />
          </Grid>
          <Grid item xs={12}>
            <Button type="submit" fullWidth variant="contained" color="primary">
              로그인
            </Button>
          </Grid>
        </Grid>
      </form>
    </Container>
  );
};

export default Login;

내용

form 태그로 감싼 input과 button으로 엔터키를 누르거나 버튼을 누르면 사용자가 입력한 값은 자동으로 submit되며 브라우저는 새로고침된다.

해결

어떤 event의 기본 동작이 발생되지 않도록 막는 코드 event.preventDefault() 를 추가한다.

const Login = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.target);
    const username = data.get("username");
    const password = data.get("password");
    // ApiService의 signin 메서드를 사용 해 로그인.
    signin({ username: username, password: password });
  };

event.preventDefault()
html에서 a태그나 submit 태그는 고유의 동작으로 페이지를 이동시키거나, form 안에 input등을 전송하는 동작이 있는데 e.preventDefault()는 그 동작을 중지시키는 역할을 한다.
input 또는 button 클릭 이벤트가 발생 했을때 페이지가 리로드가 되는데 그 현상을 막아준다.