React 폼 처리와 유효성 검사

📋 폼 처리와 유효성 검사

React에서는 폼 요소의 상태를 컴포넌트가 직접 제어하는 방식인 제어 컴포넌트(Controlled Component)를 사용합니다.
이 글에서는 입력 폼 처리와 기본적인 유효성 검사까지 다뤄보겠습니다.

1. 제어 컴포넌트란?

HTML의 <input>, <textarea> 등을 React state로 제어하는 방식입니다.
사용자의 입력값이 state에 저장되므로 즉각적인 검증, 조건부 렌더링 등에 유리합니다.

2. 기본 예제

import React, { useState } from 'react'; function SimpleForm() { const [name, setName] = useState(''); const handleSubmit = (e) => { e.preventDefault(); alert('입력된 이름: ' + name); }; return ( <form onSubmit={handleSubmit}> <label> 이름: <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> </label> <button type="submit">제출</button> </form> ); }

3. 유효성 검사 추가

아래 예제는 이름이 비어 있으면 제출하지 못하도록 하고, 에러 메시지를 보여줍니다.

import React, { useState } from 'react'; function ValidatedForm() { const [name, setName] = useState(''); const [error, setError] = useState(''); const handleSubmit = (e) => { e.preventDefault(); if (name.trim() === '') { setError('이름은 필수 입력 항목입니다.'); } else { setError(''); alert('이름: ' + name); } }; return ( <form onSubmit={handleSubmit}> <div> <label>이름:</label> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> </div> {error && <p style={{ color: 'red' }}>{error}</p>} <button type="submit">제출</button> </form> ); }

4. 고급: 이메일과 패스워드 유효성

정규식을 활용해 이메일, 패스워드 등의 입력값을 실시간으로 검증할 수 있습니다.

• 이메일: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
• 비밀번호: 최소 8자, 숫자/문자 조합 체크 등

5. 참고 라이브러리

• react-hook-form: 간결한 코드로 강력한 폼 처리
• formik: 폼 관리와 유효성 검사를 함께 제공
• yup: 유효성 검사용 스키마 라이브러리

✅ Tip: 대규모 폼이 필요하다면 Formik + Yup 조합을 사용해 보세요.