There's a problem with sending information to the server, but the page keeps refreshing

Question

I am working on modifying and sending the information through the input window after receiving the information from the server. I made it to input the information and send it to the server when I press the button. The problem is that the screen refreshes when I click the button. I don't know why it's being refreshed when there's no code to be refreshed. The value of the console to verify that the function works well comes out and then disappears as it refreshed. If I press the button, it will refresh, so I think you just need to look at the register function. I'd appreciate it if you let me know, thanks

import React from 'react'
import { useEffect } from 'react';
import { useState } from 'react';
import styled from 'styled-components';
import Footer from '../components/Footer';
import NavigationBar from '../components/NavigationBar';
import axios from 'axios';

function ProfileChange() {

  //get info
  const [useId,setUserId] = useState("");  
  console.log('아이디',useId)     

  //look up the information through this function
  useEffect(()=>{
    axios.get('https://cors-anywher.herokuapp.com/https://clone-instagram.shop:8080/users/myprofile',{
      headers: {
        'X-ACCESS-TOKEN' : localStorage.getItem('jwt')
      }
    })
    .then((response)=>{
      console.log('정보조회성공여부:',response.data.message)
      setUserId(response.data.result.id)
    })
  },[])


    //change nickname
  const [basicName,setBasicName] = useState("")

    //change name
  const [originName, setOriginName] = useState("")
  
  //this is where I think there's a problem. It's a function that sends modified information to the server
  const register = async (e) => {
      console.log('forCheck')
      await axios({
        method: "patch", 
        url: "https://cors-anywher.herokuapp.com/https://clone-instagram.shop:8080//users/edit_profile",
        headers: {
          'X-ACCESS-TOKEN' : localStorage.getItem('jwt')
        },
        data: {
          "nickname" : originName,
          "id" : basicName,
        }
    })
    .then((response)=> {
      console.log('result', response.data.isSuccess);
    })
  }
  
  //this part is not important
  const[passedMake,setPassedMake] = useState(false);

  const toParentIsMake = (isMakeClick) => {
    setPassedMake(isMakeClick)
  }

  const [ showModal, setShowModal ] = useState(false)
  const show = () => setShowModal(true)
  const hide = () => setShowModal(false)





  return (
    <>
      <NavigationBar toParentIsMake={toParentIsMake} onShowModal={show} />
      <ProfileWrap>
        <div className='Wrap1'>
          <article className='art1'>
            <form className='art1_2'>
              <div className='art1_2Div'>
                <aside className='art1_2Aside'>
                  <label className='art1_2Label'>
                    이름
                  </label>
                </aside>
                <div className='art1_2AsideDiv2'>
                  <div className='art1_2Div4'>
                    <input
                      onChange={(e)=>{setBasicName(e.target.value)}}
                      value={basicName}
                      className='art1_2Div4Input'
                      placeholder='이름'>
                    </input>
              </div>
              <div className='art1_2Div'>
                <div className='art1_2AsideDiv2'>
                  <div className='art1_2Div4'>
                    <input
                      onChange={(e)=>{setOriginName(e.target.value)}}
                      value={originName}
                      className='art1_2Div4Input'
                      placeholder='사용자 이름'>
                    </input>
                  </div>
                </div>
              </div>
                  <div className='art1_2AsideDiv2Idv'>
                    <button 
                      onClick={register}
                      className='art1_2AsideDiv2Idvbutton'>
                      submit
                    </button>
                  </div>
                </div>
              </div>
            </form>
          </article>
        </div>
        <Footer />
      </ProfileWrap>
    </>
  )
}

export default ProfileChange;

Answer 1

This is the default behavior for the button inside the form. When you click it, it sends a POST request. To prevent this behavior, add preventDefault to the handler.

const register = async (e) => {
  e.preventDefault();
  // ... other code
}