React submit 이벤트 방지하기

기본적으로 가장 접하기 쉬운 submit 방지는 preventDefault()이다.

const Header = ()=>{

const onSubmit = (e) =>{
	e.preventDefault();
}

return(
    <form>
        <input />
        <button type="button" onSubmit={(e) => onSubmit(e)}>입력</button>
    </form>
)}

 

하지만 가끔 똑같은 코드를 적어도 submit 방지가 되지 않는 경우가 있다. (직접 동일한 상황을 겪었을 때를 기준으로 생각해보면, 다른 컴포넌트와 겹치는 등의 경우로 예상된다.)

그런 경우에는 아래와 같이 작성해도 정상적으로 submit 이벤트가 중지된다.

 

const Header = ()=>{

const onSubmit = (e) =>{
	e.preventDefault();
}

return(
    <form>
        <input type="text" />
        <button type="submit" onSubmit={(e) => onSubmit(e)}>입력</button>
    </form>
)}

위와 같이 작성하면 같은 폼 안에 있는 경우에 대해 submit 방지가 잘 되는 것을 확인할 수 있다.