e.preventDefault()와의 작별

<form action={serverAction}>이라는 새로운 패턴이 등장하자, React 개발자들의 코드에서 가장 흔하게 볼 수 있었던 한 줄의 코드가 설 자리를 잃게 되었다. 바로 e.preventDefault()였다.

React Core Team의 회의실, 조쉬 스토리는 화이트보드에 ‘서버 액션 이전’과 ‘서버 액션 이후’의 폼 처리 코드를 나란히 적었다. 그 차이는 한눈에 봐도 극명했다.

Before: The Old Way

function OldForm() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault(); // 1. 기본 동작을 막는다

    // 2. 상태에 있는 데이터를 모은다
    const formData = { title, content };

    // 3. 수동으로 fetch를 호출한다
    await fetch('/api/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData),
    });

    // 4. 성공 후 리디렉션 또는 상태 업데이트 로직...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
      <textarea value={content} onChange={(e) => setContent(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

이 코드는 모든 React 개발자에게 익숙한 풍경이었다. 모든 입력 필드를 useState로 제어하고, onChange 핸들러로 상태를 업데이트하며, onSubmit에서는 가장 먼저 e.preventDefault()를 호출해 페이지가 새로고침되는 것을 막아야만 했다. 이 모든 것이 ‘클라이언트 사이드 라우팅’과 ‘비동기 데이터 제출’을 위해 필요한 의식과도 같았다.

“우리는 지난 몇 년간 이 코드를 당연하게 작성해왔습니다.” 조쉬가 말했다. “하지만 다시 한번 보세요. 이 코드의 절반 이상이 폼의 본질적인 목적과는 관계없는, 순전히 기술적인 문제를 해결하기 위한 ‘보일러플레이트’입니다.”

그의 말이 맞았다. e.preventDefault()는 브라우저의 기본 동작을 억지로 막기 위한 코드였고, useState와 onChange는 폼 데이터를 자바스크립트 세상으로 가져오기 위한 수단이었으며, fetch는 서버와 통신하기 위한 저수준 API 호출이었다.

이제, ‘서버 액션 이후’의 코드를 볼 차례였다.

After: The Action Way

function NewForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <textarea name="content" />
      <button type="submit">Submit</button>
    </form>
  );
}

회의실에 있던 모두가 그 간결함에 감탄했다.

e.preventDefault()는 흔적도 없이 사라졌다. React가 action에 함수가 전달된 것을 보고, 페이지 새로고침 없는 비동기 제출을 알아서 처리해주기 때문이다. useState, onChange, fetch 역시 마찬가지였다. HTML의 표준 name 속성을 이용해 폼 데이터를 자동으로 수집하고, 약속된 서버 액션으로 안전하게 전달하는 모든 과정이 React에 의해 완벽하게 추상화되었다.

“우리는 마침내 e.preventDefault()와의 오랜 악연을 끊게 되었습니다.”

앤드류 클라크가 만족스러운 표정으로 말했다.

그것은 단순한 코드 한 줄이 사라진 것 이상의 의미를 가졌다. 그것은 React가 더 이상 웹 표준을 거스르는 길을 가는 대신, 웹 표준을 존중하고 그 위에 더 나은 경험을 구축하는 방향으로 나아가고 있음을 보여주는 상징적인 순간이었다.

개발자들은 더 이상 폼 제출이라는 기본적인 기능을 구현하기 위해 복잡한 의식을 치를 필요가 없었다. 그들은 이제 브라우저가 원래 설계된 방식대로, 웹의 기본 원칙에 따라 코드를 작성할 수 있게 되었다. 그리고 그 단순함 위에서 React는 놀라운 마법을 부려줄 준비를 하고 있었다.

e.preventDefault()와의 작별. 그것은 개발자들을 불필요한 복잡성으로부터 해방시키는, React 19가 가져온 조용하지만 위대한 해방 선언이었다.