[React] 왜 React에서는 form submit을 기본으로 두면 안 될까?

 

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.

 

HTML에서 <form> 태그는 원래 서버로 데이터를 보내기 위한 용도다

HTML에서 <form> 태그는 **서버로 데이터를 제출(submit)**하고, 새로운 페이지를 받아오기 위한 구조로 설계됐다. 폼 안에서 버튼을 누르면 브라우저는 기본적으로 다음과 같은 흐름으로 동작한다:

🔁 브라우저 기본 동작

1. 버튼 클릭 → 폼 제출 (submit 이벤트 발생)
2. 입력값을 포함해서 서버로 HTTP 요청 전송
3. 서버가 요청을 처리하고 새로운 HTML 페이지를 응답
4. 전체 페이지가 새로고침되면서 새 화면이 열린다

---

🎈 왜 이렇게 설계됐을까? (→ SSR 기반 구조)

이 흐름은 웹 초창기부터 사용되던 전통적인 방식이다.

즉, SSR(Server-Side Rendering) 구조에 최적화되어 있었다.

✅ SSR(Server-Side Rendering) 방식이란?

• 모든 HTML 페이지를 서버에서 렌더링해서 생성하고
• 사용자의 요청마다 서버가 새 페이지를 보내주는 구조
• 폼 제출도 서버로 요청 → 서버가 새 HTML을 만들어서 응답 → 전체 페이지 교체

👉 그래서 폼 제출 시 전체 페이지 새로고침은 자연스러운 동작이었다.

---

⚠️ 그런데, 리액트에서는 문제가 된다 (→ CSR과 충돌)

리액트 같은 프론트엔드 프레임워크는 대부분 CSR(Client-Side Rendering) 방식을 사용한다.

✅ CSR(Client-Side Rendering) 방식이란?

• 처음 로딩 시 HTML 한 번만 받아오고, 이후부터는
• 브라우저 안에서 자바스크립트가 동적으로 화면을 그린다
• 페이지 전환이나 상태 변경이 새로고침 없이 빠르게 이루어진다

그런데 <form> 제출 시 브라우저 기본 동작을 막지 않으면?

• 전체 페이지가 새로고침되고
• 리액트가 관리하던 모든 상태(state)가 초기화된다
• 예상하지 않은 서버 요청이 발생해서 의도한 흐름이 깨질 수 있다

👉 CSR의 장점이 완전히 사라져버린다.

---

🛠️ React에서 폼 제출 시 주의할 점

CSR 기반 앱에서는 폼 제출의 기본 동작을 제어해야 한다.

주로 아래 3가지 방법을 사용한다.

1️⃣ 버튼에 type="button"을 명시하기

HTML에서는 <button>의 기본 type이 submit이다.

따라서 폼 안의 버튼은 기본적으로 폼 제출을 유발한다.

만약 단순한 클릭 이벤트만 처리하고 싶다면,

type="button"을 명시해서 제출을 막아야 한다.

<form>
  <button type="button">로그인</button> {/* 이 버튼은 form 제출 안 함 */}
</form>

참고: type="button"은 "폼 제출이 아닌 버튼"임을 명시하는 것이지, 이미 발생한 submit 이벤트를 막는 것은 아니다.

 

---

2️⃣ onSubmit 핸들러에서 preventDefault() 호출하기

폼 제출을 직접 다룰 경우에는,

onSubmit 이벤트 핸들러를 등록하고 preventDefault()를 호출해야 한다.

function handleSubmit(e) {
  e.preventDefault(); // ✅ HTTP 요청과 새로고침 방지
  // 여기에 로그인 처리 로직 작성
}

<form onSubmit={handleSubmit}>
  <button type="submit">로그인</button>
</form>

이 방법은, 폼 자체를 유지하면서 제출 흐름만 제어하고 싶을 때 유용하다.

(예: 로그인, 회원가입 API 요청 보내기 등)

---

3️⃣ (React 19 이상) formAction 속성 사용하기

React 19부터는 폼 제출을 더 선언적으로 처리할 수 있는

formAction 속성이 새롭게 도입되었다.

<form>
  <button formAction={handleLogin}>로그인</button>
</form>

• formAction은 버튼 클릭 시 지정된 함수가 호출된다.
• 특히 **서버 액션(Server Actions)**과 함께 사용할 때 강력하다.
• 클라이언트 액션에서도 사용할 수 있지만,
• 주로 React Server Components 환경에서 많이 활용된다.

참고: formAction은 React 19 이상에서만 사용할 수 있다.

아직은 전통적인 onSubmit + preventDefault() 패턴이 더 보편적이다.

---

🧩 참고: CSR vs SSR 한눈에 정리

구분 CSR (Client-Side Rendering) SSR (Server-Side Rendering)

렌더링 위치	브라우저(클라이언트)	서버
최초 로딩 속도	느릴 수 있음 (JS 다운로드 필요)	빠름 (HTML 바로 렌더링)
화면 전환 속도	빠름 (새로고침 없이 변경)	느림 (매번 서버 요청)
사용 예시	React, Vue, Next.js (CSR모드)	전통적인 서버 웹사이트, Next.js(SSR모드)

 

 

 

 

---

도움이 되셨다면 ❤️ 좋아요와 댓글로 피드백 주세요!

궁금한 점이 있다면 언제든지 질문 환영입니다 😄

지금까지 읽어주셔서 감사합니다!