Form 태그로 인한 문제 발생

Form태그 안의 Button 태그를 이용해 axios를 이용하는 함수를 불러 서버와 통신을 진행할 때, 같은 요청이 여러번 발생하는 문제가 있다.

이는 Form태그 내부의 Button의 기본 동작이 submit으로 작동하기 때문인데, 이를 막기 위한 방법은 두가지가 있다.

1. 버튼 태그의 타입 지정하기

submit을 하지 않는 타입으로 버튼의 타입을 지정해주면 된다.

<buttom type="button"></button>

2. 이벤트 버블링 막기

preventDefault()를 통해 이벤트 버블링을 막아 전파가 되지 않도록 하는 방법이 있다.

const communicationWithServer = event =>{
  event.preventDefault();
  // ...
}