[React] 하나의 Form에서 여러 개의 Submit 이벤트를 다루는 방법

개요

• <form> 태그는 기본적으로 하나의 submit 이벤트만 수행한다.
• 그렇다면, <form> 태그에 여러 개의 submit 이벤트가 존재하려면 어떻게 해야 할까?

코드

function Login() {
  const [isSignUpPage, setSignUpPage] = useState(false); // 회원가입 페이지 접근 여부
  
  const signedUp = () => {}; // [회원가입] 버튼 클릭 Handler
  const loggedIn = () => {}; // [로그인] 버튼 클릭 Handler
  
  // Form Submit Handler
  const onSubmitHandler = () => {};
  
  return (
    <form onSubmit={onSubmitHandler}>
      {isSignUpPage ? (
        // 회원가입 페이지
        <>
          <button type="submit">회원가입</button>
          <button type="button" onClick={() => setSignUpPage(false)}>돌아가기</button>
        </>
      ) : (
        // 로그인 페이지
        <>
          <button type="submit">로그인</button>
          <button type="button" onClick={() => setSignUpPage(true)}>회원가입</button>
        </>
      )}
    </form>
  );
}

방법

1. 각 버튼에 name을 지정한다.

2. React의 e.nativeEvent 속성을 사용한다.

   React의 이벤트 핸들러는 React 이벤트 객체의 속성과 브라우저 이벤트 객체의 속성을 모두 가진다.

   e.nativeEvent 속성 : 브라우저 이벤트 객체의 속성

• e.nativeEvent.submitter.name을 사용하여 조건부 렌더링을 수행한다.

코드

function Login() {
  const [isSignUpPage, setSignUpPage] = useState(false); // 회원가입 페이지 접근 여부
  
  const signedUp = () => {}; // [회원가입] 버튼 클릭 Handler
  const loggedIn = () => {}; // [로그인] 버튼 클릭 Handler
  
  // Form Submit Handler
  const onSubmitHandler = (e) => {
    e.preventDefault();
    // submit을 발생시킨 버튼(submitter)의 name
    const buttonType = e.nativeEvent.submitter.name; 
    // name에 따라 조건부 렌더링
    if (buttonType === "signUp") {
      signedUp();
    } else if (buttonType === "login") {
      loggedIn();
    } else return;
  };
  
  return (
    <form onSubmit={onSubmitHandler}>
      {isSignUpPage ? (
        // 회원가입 페이지
        <>
          <button type="submit" name="signUp">회원가입</button>
          <button type="button" onClick={() => setSignUpPage(false)}>돌아가기</button>
        </>
      ) : (
        // 로그인 페이지
        <>
          <button type="submit" name="login">로그인</button>
          <button type="button" onClick={() => setSignUpPage(true)}>회원가입</button>
        </>
      )}
    </form>
  );
}