[Warning] Form submission canceled because the form is not connected

Summary

삽질은 아니고 강의 따라 하기 전에 제가 미리 만들어보는 데 제 코드에서 warning을 발견했습니다.

동작에 큰 문제는 없었고 강의 내용대로 하나만 추가하니 바로 고쳐졌지만 혹시나 나중에 같은 warning 메서지가 떴을 때 당황하지 않기 위해 기록해보려고 합니다.

---

Problem

warning이 발생하는 경우는 위와 같습니다.

저 Cancel 버튼을 클릭했을 때 warning 문구가 뜹니다. 저 버튼은 Form 태그 안에 속해있고요.

<form onSubmit={submitHandler}>
      <div className="new-expense__controls">
		생략...
        </div>
      </div>
      <div className="new-expense__actions">
        <button onClick={props.addNewFormBtnHandler}>
          Cancel
        </button>
        <button type="submit">Add Expense</button>
      </div>
    </form>

---

Solved

해결방법은 아주 간단합니다. button type으로 'button'을 추가하면 더 이상 warning 메시지가 뜨지 않습니다.

    <button type="button" onClick={props.addNewFormBtnHandler}>
      Cancel
    </button>

---

그럼 이제 저 warning 메세지가 왜 뜨는지에 대해 알아보겠습니다.

button 태그의 type 기본값은 'submit'이다

제곧내.

킹DN이 말해줍니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/button

 

Cancel 버튼의 역할은 form이 포함된 컴포넌트를 언마운트 시키는 것입니다.

하지만 type을 지정하지 않으면 기본값이 submit이고 버튼 클릭 시 데이터를 제출하는 거죠.

근데 저는 버튼에 onClick함수로 Cancel 버튼 클릭시 폼 관련 컴포넌트를 언마운트되도록 했습니다.

 

버튼 클릭 시 폼이 화면에서 사라지고(연결이 끊김) 폼을 제출할 수 없어서 경고 메시지가 발생한 것 같습니다.

---

버튼 type 앞으로 꼭 명시해야겠네요.