react-hook-form을 적용해보자 (feat. 회원가입)

react-hook-form 란?

react-hook-form 사용을 하면 form을 더 쉽게 만들기 위한 라이브러리로, 아래와 같은 장점을 가집니다.

장점

• 배우기 쉽다
• 유효성 검사에 유용하다.
• HTML 표준을 활용하여 안정적인 기능을 제공한다.
• 재 렌더링 횟수를 최소화한다.
  • 구성 요소를 즉각 분리하여 같은 컴포넌트 내 요소들의 의미 없는 재 렌더링을 막아준다.
  • 전체 양식을 재 렌더링 하지 않고, 개별 입력 및 양식 상태 업데이트를 구독할 수 있다.

여기서는 간략하게 설명하고 넘어가도록 하겠습니다. 더 자세한 내용은 https://react-hook-form.com/ 을 참고해주세요.

react-hook-form 설치하기

아래 명령어를 입력하면, react-hook-form이 설치되어 사용할 수 있습니다.

npm install react-hook-form

 

간단한 회원가입 만들어보기

간단한 회원가입을 통해 react-hook-form을 사용해 보도록 하겠습니다. 참고로, css 코드는 생략되어 있습니다.

import {useForm} from "react-hook-form";

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

    function handleFormSubmit(values) {
        console.log("values : ", values);
    }

    return (
        <>
            <div id="signupWrapper">
                <div className="title text-2xl">회원가입</div>
                <form className="form-submit" onSubmit={handleSubmit(handleFormSubmit)}>
                    <label>
                        이메일(ID)
                        <input type="email" name="email" {...register("email", {
                            required: "이메일을 입력해주세요.",
                            pattern: {
                                value: /[a-z0-9]{2,}@[a-z0-9-]{2,}\\.[a-z0-9]{2,}/i,
                                message: "이메일 형식에 맞게 입력해주세요."
                            }
                        })}/>
                        <span>{errors?.email?.message}</span>
                    </label>
                    <label>
                        비밀번호(PW)
                        <input type="password" name="password" {...register("password", {
                            required: "비밀번호를 입력해주세요.",
                            pattern: {
                                value: /^(?=.*[A-Za-z])(?=.*\\d)(?=.*[!@#$%?*])[A-Za-z\\d@$!%*#?&]{8,}$/,
                                message: "영문자, 숫자 및 특수문자(!@#$%?*)를 포함하여 8자리 이상 입력해주세요."
                            }
                        })}/>
                        <span>{errors?.password?.message}</span>
                    </label>
                    <label>
                        이름
                        <input type="name" name="name" {...register("name", {
                            required: "이름을 입력해주세요."
                        })}/>
                        <span>{errors?.name?.message}</span>
                    </label>
                    <label>
                        핸드폰번호
                        <input type="phone" name="phone" {...register("phone", {
                            required: "핸드폰번호를 입력해주세요.",
                            pattern: {
                                value: /^\\d{3}-\\d{3,4}-\\d{4}$/,
                                message: "000-0000-0000 형식으로 입력해주세요."
                            }
                        })}/>
                        <span>{errors?.phone?.message}</span>
                    </label>
                    <label>
                        닉네임
                        <input type="nickname" name="nickname" {...register("nickname", {
                            required: "닉네임을 입력해주세요."
                        })}/>
                        <span>{errors?.nickname?.message}</span>
                    </label>
                    <div className="daangn-wrapper">
                        <button className="btn-daangn" type="submit">가입하기</button>
                    </div>
                </form>
            </div>
        </>
    )
}

export default Signup;

아래 이미지를 통해 입력을 제대로 하면 닉네임 입력창처럼 에러 메시지가 뜨지 않고, 필수 입력을 채우지 않거나 유효하지 않은 방식으로 입력하면 에러 메시지가 뜨는 것을 확인할 수 있습니다.

 

참고

• https://react-hook-form.com/
• https://velog.io/@kihyun/React-Hook-Form-사용하기
• https://www.npmjs.com/package/react-hook-form
• https://cheri.tistory.com/262#recentComments