기간동안 한 일
로그인 페이지와 회원가입 페이지를 useForm을 사용해서 유효성 검사 기능을 추가해봤다. 저번 프로젝트에서는 useState를 참고하여 유효성 검사 기능을 구현했는데 이번에는 useForm을 사용해서 유효성 검사 기능을 구현해봤다.
useForm 란?
React 라이브러리에서 제공하는 커스텀 훅(custom hook) 중 하나로, HTML 폼(form)을 다루는데 도움을 주는 훅이다. Useform은 폼에 입력된 데이터를 추적하고, 폼 유효성 검사(validation)를 수행하며, 폼 전송(submit)을 처리할 수 있다. 이를 통해 개발자는 더 쉽게 폼을 다룰 수 있고, 코드의 가독성과 유지보수성을 높일 수 있다. Useform은 리액트 어플리케이션에서 폼 관련 로직을 추상화하고, 재사용성을 높여준다.
이번에 useForm을 사용한 이유
프리프로젝트 때 useStaete를 사용을 했는데 useState로 상태관리며 유효성검사며 코드들이 많아져 가독성들이 많이 떨어졌었다.
그래서 이것들을 해결할 방법을 찾던중 useForm을 알게 됐다.
useForm은 일일이 useState를 지정해줄 필요 없이, register로 등록만 해둔다면, 유효성 검사까지 마친 완벽히 정제된 데이터를 받아볼 수 있어서 많이 편해서 useState대신 useForm을 사용하게 됐다.
useForm 사용법
• 패키지 설치
$ npm install react-hook-formuseForm 메서드
function MyForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
<input
className="SignupInput"
name="username"
type="text"
placeholder="username"
{...register('username', {
required: true,
minLength: {
value: 2,
message: '2글자 이상 입력해주세요',
},
})}
/>
{errors.username?.type === 'required' && '닉네임을 입력해주세요'}
{errors.username?.type === 'minLength' && errors.username.message}• register
- 입력 요소를 폼 데이터에 등록한다.
register는 사용할 때...register("사용할이름")이 형식으로 이름을 저장을 해놓을 수 있다. 이 이름을 나중에 꺼내와서 값을 불러올 수 있다.
• handleSumbit
- 폼 제출 이벤트 핸들러이다.
- 다음과 같이 useForm hook을 사용하여 폼을 생성하고 handleSubmit 함수를 정의할 수 있다.
• erros
- 폼 입력 값의 유효성 검사 결과에 따라 발생한 에러를 포함하고 있다.
errors객체를 사용하기 위해서는 먼저useForm hook에서formState객체를 가져와야 한다.errors.username및errors.email을 사용하여 각 필드의 오류 상태를 확인한다.
• 실행결과
참고
코드스테이츠 블로그