React 19의 form submit 동작 개선사항

이틀 전 React 19의 stable 버전이 배포되었는데, 여러 번경사항들 중에서 크게 두 가지가 피부에 와닿았다.

 

하나는 더이상 ref를 하위 컴포넌트에 전달할 때 forwardRef를 사용하지 않아도 된다는 것이고, 다른 하나는 form submit의 동작이 살짝 변했다는 것이다.

💡 만약 폼에서 다루는 데이터 및 검증 구조가 복잡해지거나, 컴포넌트 구조가 중첩된다면 react-hook-form을 도입해볼 것을 권해드립니다.

먼저 React 18 이하에서는 폼 제출 코드를 다음과 같이 작성한다.

// React @^18
import { FormEventHandler } from "react";

const App = () => {
  const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
    // submit 이벤트는 기본적으로 새로고침을 유발한다.
    e.preventDefault(); // (개인적으로) 불필요하다고 느끼는 부분 (1)

    const formData = new FormData(e.currentTarget); // 불필요하다고 느끼는 부분 (2)
    const id = formData.get("id");
    const password = formData.get("password");

    console.log("아이디:", id);
    console.log("비밀번호:", password);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="id">아이디</label>
          <input id="id" name="id" />
        </div>
        <div>
          <label htmlFor="password">비밀번호</label>
          <input id="password" />
        </div>
        <button type="submit">로그인</button>
      </form>
    </div>
  );
};

export default App;

질 알려진 것처럼 submit 이벤트는 기본적으로 새로고침을 발생시키기 때문에, 기본 동작을 수행하지 않도록 최상단에 preventDefautl() 메서드를 호출하는 모습이다.

 

그런데, React 19에서는 해당 문법이 보다 사용하기 쉽게 변했다.

// React @^19

const App = () => {
  const handleSubmit = (formData: FormData) => {
    const id = formData.get("id"); // "id" 필드의 값 추출
    const password = formData.get("password"); // "password" 필드의 값 추출

    console.log("아이디:", id);
    console.log("비밀번호:", password);
  };

  return (
    <div>
      <form action={handleSubmit}> // onSubmit 대신 action 속성에 메서드를 전달한다.
        <div>
          <label htmlFor="id">아이디</label>
          <input id="id" name="id" />
        </div>
        <div>
          <label htmlFor="password">비밀번호</label>
          <input id="password" />
        </div>
        <button type="submit">로그인</button>
      </form>
    </div>
  );
};

export default App;

먼저 preventDefault() 메서드를 호출하지 않아도 페이지가 새로고침되지 않도록 변했다.

또 폼 내부 값을 추출하기 위해 명시적으로 formData 인스턴스를 생성할 필요도 없고, event.currentTarget을 추출하지 않아도 된다.

 

개인적으로는 onSubmit 핸들러는 그대로 유지해 breaking change를 만들지 않으면서, 간만에 서버 컴포넌트가 아닌 기본적인 웹 개발 경험을 끌어올려줄 수 있는 React 팀의 작은 선물처럼 느껴져 반가웠던 것 같다. 🙂