[React] React에서 폼(form) 다루기 :: 추출, 유효성검증, 초기화, 제출

 

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

 

리액트나 일반 HTML에서 form을 다룰 때, 생각보다 다양한 문제를 마주치게 됩니다.

단순히 "입력값 받아서 제출"하는 걸 넘어, 다음과 같은 고민들이 따라오죠:

• 어떻게 입력값을 깔끔하게 추출할까?
• 유효성 검사는 언제, 어떻게 해야 깔끔할까?
• 입력 후 초기화는 어떻게 해야 할까?
• 리액트에서는 form 제출을 어떻게 다뤄야 할까?

이번 글에서는 위의 문제들을 하나씩 정리하고, 실제로 어떤 방식으로 해결하는 게 좋은지 이야기해보겠습니다.

---

📌 1. 입력 데이터 추출 방법

폼에서 입력된 값을 가져오는 방식은 상황에 따라 다르게 선택할 수 있습니다.

✅ 방법 1: useState로 입력 상태 관리 (양방향 바인딩)

const [username, setUsername] = useState("");

<input value={username} onChange={(e) => setUsername(e.target.value)} />

• 리액트에서 가장 많이 사용하는 방식
• 실시간으로 상태를 추적하고 활용 가능
• 단점: 코드가 조금 길어질 수 있음

---

✅ 방법 2: useRef로 DOM 요소 접근

const inputRef = useRef();

function handleSubmit(event) {
  event.preventDefault();

  const input = inputRef.current.value;
}

...

<input ref={inputRef} />

• 값이 필요할 때만 추출하면 되는 경우 사용
• 렌더링을 발생시키지 않음 (퍼포먼스 유리)
• 단점: 리액트의 상태 흐름에서 벗어날 수 있음

---

✅ 방법 3: FormData API로 한 번에 추출

function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData.entries());
}

• form 전체 데이터를 한 번에 가져올 수 있음
• input에 name 속성이 필수
• 체크박스처럼 여러 값을 가지는 경우는 formData.getAll() 사용 필요
  • 특정 name 에 해당하는 모든 값을 배열로 가져옴

function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const acquisitionChannel = formData.getAll("acquisition"); // 체크박스 
  const data = Object.fromEntries(formData.entries());
  data.acquisition = acquisitionChannel;
}

---

📌 2. 유효성 검증 (Validation)

폼에서 유효성 검사는 UX에 직접적인 영향을 주는 요소입니다.

너무 이르거나 너무 늦은 타이밍에 표시되면 사용자가 불편을 느낄 수 있어요.

✅ 방법 1: 실시간 검증 (onChange)

<input value={email} onChange={(e) => {
  setEmail(e.target.value);
  setError(!validateEmail(e.target.value));
}} />

• 입력할 때마다 검증
• ❌ 문제: 사용자가 입력을 마치기도 전에 에러가 떠버리는 UX

---

✅ 방법 2: 포커스 해제 시 검증 (onBlur)

<input onBlur={() => setTouched(true)} />

• 사용자가 입력 후 포커스를 벗어나면 검증
• ✅ UX 관점에서 가장 적절한 타이밍

---

✅ 방법 3: useRef와 입력 완료 시 검증

• 상태 관리 없이 입력 완료 타이밍에 값을 꺼내서 검증
• 단순한 검증 로직에 유용

---

✅ 방법 4: HTML의 내장 속성 사용

<input required minLength={5} />

• 브라우저 기본 유효성 검사가 작동
• 간단한 유효성에는 매우 유용

---

📌 3. 폼 초기화 처리

입력 완료 후 상태를 초기 상태로 되돌리는 방법입니다.

✅ 방법 1: useState로 초기값 설정

setUsername(""); // 다시 빈 문자열로

• 가장 일반적인 리액트 방식

---

✅ 방법 2: useRef 초기화

inputRef.current.value = "";

• DOM을 직접 조작하는 방식이라 권장되진 않지만, 간단한 경우 사용 가능

---

✅ 방법 3: event.target.reset() 사용

function handleSubmit(e) {
  e.preventDefault();
  e.target.reset(); // form 전체 초기화
}

• 한 줄로 폼 전체를 초기화 가능
• 상태를 쓰지 않는 경우 특히 유용

---

📌 4. 양식 제출 제어 (submit 제어)

✅ HTML의 기본 동작

<form> 태그는 원래 서버로 데이터 제출 + 전체 페이지 새로고침을 유발합니다.

이건 전통적인 SSR(Server-Side Rendering) 방식에 맞춘 설계죠.

---

✅ 리액트에선 왜 문제가 될까?

리액트는 CSR(Client-Side Rendering) 기반입니다.

즉, 페이지 전체를 새로고침하면:

• 리액트가 관리하던 상태가 날아가고
• 앱 흐름이 깨지며
• 사용자 경험이 떨어지게 됩니다

그래서 반드시 기본 submit 동작을 막아야 합니다.

---

✅ 해결 방법

1️⃣ type="button" 사용

<form>
  <button type="button">제출</button>
</form>

• <button>의 기본값은 type="submit"이므로 명시적으로 설정해야 함

2️⃣ onSubmit + preventDefault()

<form onSubmit={(e) => {
  e.preventDefault();
  // 사용자 입력 처리 로직
}}>
  <button type="submit">제출</button>
</form>

• 가장 일반적인 방식

3️⃣ formAction (React 19 이상)

<form>
  <button formAction={handleAction}>제출</button>
</form>

• 서버 액션과 연동되는 새로운 방식
• React 19에서만 사용 가능

 

 

 

 

---

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

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

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