[React] form submit 버튼이 form 바깥에 위치해야 하는 경우

 

우리 디자인시스템의 모달은 <modal.body>와 <modal.controller> 부분으로 나뉘어져 있는데,

form으로 modal 전체를 감싸버리면 css가 깨지는 문제가 있었다(=form은 modal content 부분만 감싸야 함).

 

 

 

 

 

그러면 submit 버튼은 <form> 외부에 있기 때문에 눌러도 동작하지 않는데,

 

1. form에 id를 부여

2. 등록버튼에 해당 id값을 알려주는 것으로 해결했다.

 

const onSubmit = () => { ...api호출 }

...

return(
  <Modal>
    <Modal.Head></Modal.Head>
  
    <Modal.Body>
      <form id="addForm" onSubmit={handleSubmit(onSubmit)}> // HERE!!
        ...
      </form>
    </Modal.Body>
  
    <Modal.Controller>
      <button form="addForm">등록</button> // HERE!!
    </Modal.Controller>
  </Modal>
)