리액트 부트스트랩 버튼 클릭시 사이트 전체 reloading, refreshing 되는거 막는 법, e.preventDefault()

💡e.preventDefault()

 

 

리액트 부트스트랩에서 제공하는 버튼을 사용하면 버튼 클릭시 자동으로 사이트 전체가 리프레싱 되는 경우가 있다. 이게 내 코드상 필요하지 않은 부분이었고 이를 막기 위해 event handler에 e.preventDefault를 사용하였다.

 

import React from "react";

export default function App() {
  const onSubmit = (e) => {
    e.preventDefault();
    console.log("refresh prevented");
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <button type="submit">submit</button>
      </form>
    </div>
  );
}

 

위는 그냥 예제코드이다. onSubmit 함수 안에 e.preventDefault() 만 추가해주면 끝!