[REACT] preventDefault()

 

// JSX
return (
	<div>
    	<form>
            <input type="text" placeholder="내용을 입력해주세요" />
            <input type="submit" value="전송" />
        </form>
    </div>
)

 

만약, 위와 같은 코드가 존재한다고 가정했을 때 입력한 데이터를 submit 하기 전에

실행해야 할 프로세스들이 있다고 한다면 어떻게 해야 될까?

 

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

 

바로 submit 함수를 하나 만들어주고, form 태그에는 onSubmit={submit} 과 같이 입력하면 된다.

이 함수의 구현부를 살펴보면, preventDefault() 라는 함수가 존재하는데

이번 포스트에서는 이 함수에 대해 간략하게 기술해보려고 한다.

 

preventDefault()

 

출처 : Youtube채널 dcode

 

form 태그에는 submit 버튼이 무조건 존재하기 마련이다.

이 버튼을 클릭하게 되면 브라우저는 기본적으로 폼을 제출하고 페이지를 새로고침하는데

이 때 preventDefault()를 사용하면 이러한 기본 동작을 취소할 수 있다.

 

이러한 기본 동작을 취소하고, 처리해야할 프로세스 로직을 작성하면 원하는대로 데이터를 조작할 수 있게 된다.

 

preventDefault()는 폼을 제출할 때만 쓰이는 것이 아니라

모든 이벤트 핸들러 함수에서 이벤트의 기본 동작을 취소할 수 있다.

 

장점

 

SPA(Single Page Application)에서 브라우저의 새로고침을 방지하고

페이지를 부드럽게 갱신할 수 있는데에 유용하다.