Error] form태그 submit 시, 페이지 이동 막기

React에서 form태그 작성 후, button type을 submit을 주고 실행했는데 내가 작성한 로직대로 동작하지 않고,

form태그 안에 input태그들의 값들은 초기화되고, 페이지는 그대로 있는 현상을 볼 수 있을 겁니다.

 

 

---

 

 

원인

form태그에서 submit이 작동하면,

action속성에 지정된 url로 request 하여 해당 페이지로 이동하는 것이 기본 동작입니다.

 

React 개발자(SPA)는 브라우저가 새로고침 되는 현상을 최소화하기 위해

직접 작성한 함수를 통해 로직이 동작하는 것을 원할 겁니다.

 

 

---

 

 

해결방법

위에서 설명한 submit기본동작은 필요 없음으로 event.preventDefault()를 줘서 request를 막으면 됩니다.

기본 submit 동작을 막았기 때문에 구현한 대로 동작하게 됩니다.

 

 

---

 

 

 

예

 

e.preventDefault() 를 사용할 때랑 안 할 때랑의 차이를 볼 수 있다.

해당 함수를 실행하지 않으면, console.log가 찍히고 페이지가 새로고침되면서 log가 사라지게 되고,

실행하면 값이 유지되면서 console.log가 찍히고 남아있는 것을 볼 수 있다.

 

 

---

 

 

 

 

error가 발생한 건 아니지만, form태그의 기본 원리를 모른다면 error가 발생한 것보다 더 어려울 수도 있는 상황입니다.
놓치기 쉽기도 하고 까먹을 가능성도 높으니 충분히 인지하고 있는 편이 좋을 것입니다