form 태그 reload 현상

버튼 클릭시 reload되는 현상

문제 원인 - 우선 button이 form 태그 안에 있을 경우 발생합니다. 그이유는 form태그안에 있는 버튼은 기본적으로 type이 submit 으로 설정되어 있어서 어떠한 이벤트를 주었을 때 버튼 클릭을 하면 reload가 되는 현상이 나타 납니다. 일반 버튼일 경우 상관 없지만 form 태그 안에 버튼이 있는 경우에는 따로 type을 설정하지 않으면 reload현상이 나타납니다.

해결볍 1

html에서 button 태그 type을 button으로 설정합니다.

//문제 코드
<form>
<button className="user_update_btn" onClick={updateUser}>수정</button>
</form>

// 해결 코드
<form>
<button type="button" className="user_update_btn" onClick={updateUser}>수정</button>
</form>

해결법 2

자바스크립트에서 event.preventDefault()로 제어 해줍니다. preventDefault()는 브라우저의 기본 동작을 제어 해주는 역할을 합니다.

function joycoding(event) {
    event.preventDefault();
    //...
}

그외 참고 사항

참고 레퍼런스1
참고 레퍼런스2
참고 레퍼런스3