form 바깥에서 submit시키는 button 구현하기

1. 들어가며

사이드 프로젝트 하다가 useFunnel 사용한 구조에서 Form 트리거 시키는 방법에 대해 고민하게 되었다.

특히 부모-자식 관계가 아닌 Form을 트리거해야 하는 상황이 생겼는데, 이를 해결하면서 알게 된 방법을 소개한다.

2. button type="submit"

가장 기본적인 방법으로 button에 type을 추가해 가장 가까운 부모 노드의 form을 submit 시키는 방법이다.

      

      

      

    
    

      <javascript />
    
function ParentForm() {
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Child />
    </form>
  );
}

function Child({ register }) {
  return <button type="submit">제출</button>;
}

 

하지만 버튼이 form 안에 있어야 한다는 제한사항이 있다.

3. form id 사용

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

<button>: 버튼 요소 - HTML: Hypertext Markup Language | MDN

      

      

      

    
    

      <javascript />
    
export const submitIdForm = (formId: string) => {
  const formElement = document.getElementById(formId) as HTMLFormElement;
  if (formElement) {
    formElement.requestSubmit();
  } else {
    throw new Error("Form element not found");
  }
};

 

이렇게 form에 id 프로퍼티를 넣고 타 컴포넌트에서 해당 HTMLElement를 잡아 submit 시키는 방법으로 form 외부에서 submit처리가 가능하다.

React에서 권장하지 않는 DOM api 사용이지만 snapshot을 반환하는 querySelector와 달리 getElementByID가 반환하는 htmlElement는 실시간 참조이므로 괜찮다. step만 잘 싱크해주면 됨

useFunnel로 step관리, react-hook-form 같이 사용 시 이거보다 좋은 방법을 못 찾겠다.

문제 생기면 추가 포스팅 할 예정..

 

https://github.com/dust-rabbit/dust-rabbit-frontend/pull/27

next step상단 버튼으로 수정 (feature/move-signup-next-button) by donghyun1998 · Pull Request #27 · dust-rabbit/dust-ra

상세 코드는 해당 PR에서 확인 가능

 

++2/23) DOM api 직접접근은 안티패턴같다 ref로 개선함

https://github.com/dust-rabbit/dust-rabbit-frontend/pull/29

회원가입 스텝 ref, state사용해서 개선 (refactor/signup-step-validation) by donghyun1998 · Pull Request #29 · dust-

++2/26) 근데 굳이 이렇게 하는거보다 외부에 있는 form submit button을 form 안에 넣는게 가장 좋은 방법이라는 피드백을 받았다.

생각해보니 그게 맞는듯? 저거 꼴랑 네브바만 안으로 넣으면 되는데 왜 이생각을 못했지..?

그냥 form 외부에서 submit 시키는방법 써보고 싶었던걸로..