[JavaScript] e.preventDefault() 사용

e.preventDefault() 의 용도

<a> 태그는 href를 통해 특정 링크로 이동시켜주며 <submit> 태그는 값을 전송하면서 창이 새로고침됩니다
e.preventDefault()는 태그의 이러한 이벤트 기능을 막아줄 수 있습니다

사용 예시

간단한 구구단 게임을 예시로 사용하겠습니다. 입력 폼 아래에는 오답인지 정답인지를 알려주는 div가 존재합니다

const onSubmit = (e:any) => {
        if (first * second === Number(inputValue)) {
            setFirst(Math.ceil(Math.random() * 9))
            setSecond(Math.ceil(Math.random() * 9))
            setInputValue("")
            setResult("정답")
        }
        else {
            setInputValue("")
            setResult("오답")
        }
    }

입력 버튼을 눌렀을때 위의 onSubmit 함수가 실행됩니다.

입력값이 정답일 경우

구구단 문제 및 입력칸 초기화
"정답" 메시지

입력값이 오답일 경우

입력칸만 초기화
"오답" 메시지

하지만 이 코드를 실행해보면 예상과는 반대로 "정답" 혹은 "오답"이라는 문자열이 1초 정도 보였다가 다시 사라질뿐더러 오답일 경우에도 숫자 두개가 바뀌게 됩니다.

그 이유는 submit 됨과 동시에 창이 새로고침되기 때문 입니다. 이를 막기 위해서 발생한 event 에 대해 preventDefault 를 해주어야 합니다.

const onSubmit = (e:any) => {
  		e.preventDefault();
        if (first * second === Number(inputValue)) {
            setFirst(Math.ceil(Math.random() * 9))
            setSecond(Math.ceil(Math.random() * 9))
            setInputValue("")
            setResult("정답")
        }
        else {
            setInputValue("")
            setResult("오답")
        }
    }

위처럼 코드에 e.preventDefault() 를 추가해주면 창이 새로고침 되는 것을 막을 수 있습니다. 때문에 정답 혹은 오답이라는 문구가 submit 된 이후에도 남아있습니다.

마무리

preventDefault() 를 사용하면 데이터는 정상적으로 전송되지만 페이지 새로고침만 막을 수 있기 때문에 유용하게 쓰일 것 같습니다
끗 @ !!