React 입력 폼 처리

1️⃣ 기본 입력 처리: useState 로 만들기

// components/LoginForm.tsx
import { useState } from "react";

function LoginForm() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        console.log('로그인 정보: ', { email, password });
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>이메일</label>
                <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
            </div>
            <div>
                <label>비밀번호</label>
                <input
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
            </div>
            <button type="submit">로그인</button>
        </form>
    );
}

export default LoginForm;

// App.tsx
import LoginForm from "./components/LoginForm";

function App() {
  return (
    <div>
      <h1>로그인 페이지</h1>
      <LoginForm />
    </div>
  )
}

export default App;

---

2️⃣ react-hook-form 으로 더 편하게 사용하기

• react-hook-form 설치

npm add react-hook-form

• 적용 코드

// components/LoginForm.tsx
import { useForm } from "react-hook-form";

type LoginFromValues = {
    email: string;
    password: string;
};

function LoginForm() {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<LoginFromValues>();

    const onSubmit = (data: LoginFromValues) => {
        console.log('로그인 정보: ', data);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div>
                <label>이메일</label>
                <input
                    {...register('email', { required: '이메일은 필수입니다' })}
                />
                {errors.email && <p>{errors.email.message}</p>}
            </div>

            <div>
                <label>비밀번호</label>
                <input
                    type="password"
                    {...register('password', { required: '비밀번호는 필수입니다' })}
                />
                {errors.password && <p>{errors.password.message}</p>}
            </div>

            <button type="submit">로그인</button>
        </form>
    );
}

export default LoginForm;

---

---

🚀 핵심 포인트 요약

개념	설명
useState	입력값 관리 가능하지만 귀찮음
useForm()	react-hook-form 의 핵심 훅
register()	input 요소와 상태 연결
handleSubmit()	제출 시 유효성 검사 포함
errors	입력 검증 에러 담긴 객체