[라이브러리] React Hook Form

 

// const [email, setEmail] = useState("");
// const [password, setPassword] = useState("");

// const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
//     e.preventDefault(); // form submit 시 action에 의해 페이지 이동 막음
//     console.log(email, password);
// }

// react-hook-form 이용해 form 관리 
const { register, 
		handleSubmit, 
		formState: { errors}
	  } = useForm<SignupProps>();
	  

<InputText  placeholder="이메일"
	// inputType="email" value={email}
	// onChange={(e) => setEmail(e.target.value)}
	inputType="email" 
	{...register("email", {required: true})}    // "필드명", 필수 여부
/>
{errors.email && <p className="error-text">이메일을 입력해주세요.</p>}

위 코드는 기존 useState로 input state를 관리하던 방식을 react-hook-form으로 대체하여 더 효율적으로 폼을 관리하는 예시이다.

 

기존 방식 (useState)

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  console.log(email, password);
};

useState를 사용하면

• input마다 state 생성
• onChange 이벤트마다 setState 호출
• 값들을 Submit 시 직접 수집
  이런 과정이 필요함 → 코드가 길고 비효율적

react-hook-form 방식

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

react-hook-form은 입력값을 별도의 state 없이 내부적으로 관리해주므로,
onChange, setState 없이도 값을 자동으로 추적한다.

 

입력 필드 등록

<InputText
    placeholder="이메일"
    inputType="email"
    {...register("email", { required: true })}
/>

 

코드	의미
register("email")	폼 내부에서 관리할 필드 이름을 지정
{ required: true }	유효성 검사 규칙 지정 → 필수 입력
{...register()}	해당 Input 컴포넌트를 react-hook-form에 연결

즉, 이 1줄이 아래 역할을 모두 한다:

• value 상태 저장
• onChange 이벤트 추적
• Submit 시 값 전달
• 유효성 검사 rule 적용

 

에러 메시지 처리

{errors.email && <p className="error-text">이메일을 입력해주세요.</p>}

 

• formState.errors.email 이 존재한다 = 이 필드가 유효성 검사에서 실패했다는 뜻
• required rule 때문에 값이 비어있으면 errors.email 이 true

---

전체 동작 흐름 정리

단계	동작
필드 등록	register("email") 로 react-hook-form에 input을 연결
입력	hook-form이 자동으로 입력 값 감시 및 상태 저장
제출	handleSubmit(콜백) 실행 시 모든 필드 값이 자동으로 콜백 인자로 전달
검증	rule(required 등) 실패 → errors 객체에 저장

---

장점 정리

기존 useState 방식	react-hook-form 방식
input마다 state 필요	state 없이 관리 가능
onChange 필요	불필요
validation 직접 구현	rule 옵션으로 간단
렌더링 많음	성능 최적화되어 렌더링 최소화

---

정리

이 코드는 useState + onChange + setState 방식 대신
react-hook-form으로 폼 상태 + 유효성 검사 + submit 처리를 간결하게 통합한 예시이다.

따라서 실무에서는 form이 복잡해질수록 react-hook-form을 쓰는 것이 훨씬 유리하다.