노마드코더 Next.JS 챌린지 - 로그인 화면 구현 (React-hook-form)

 

https://codesandbox.io/s/rhf-blueprint-forked-r5jijc?file=/src/App.js 

RHF-Blueprint (forked) - CodeSandbox

 

백지상태에서 로그인아이디 비밀번호 메일을 사용해서 로그인 창을 만드는 챌린지

 

 

주요 기능

로그인 키를 클릭 전 3가지 창에서 주어진 조건이 충족됬을 경우만 진행가능하다.

 

이외에도 기본적으로 이메일일경우 이메일인지

전화번호일땐 전화번호인지 등 기본체크는 라이브러리에 포함되어 있다.

//간단히 알아보는 코드와 기능
// onsubmit으로 onvalid (통과시) oninvalid (비통과시)를 가져와서 함수단에서 사용가능
<form onSubmit={handleSubmit(onValid, onInvalid)} className="main">

//  minLength -> 최소길이 , validate -> 필요 데이터 (예시에는 네이버만 사용가능)
{...register("username", {
            required: "Username is required",
            minLength: {
              message: "The username should be longer than 5 chars.",
              value: 5
            }
            validate: {
              notNaver: (value) =>
                value.includes("@naver.com") || "only used naver plz"
            }
            })}
            
// username이 에러가 발생하면 메세지를 적음 (이경우 예를 들어 5글자 이하이면 minlength 에러)
{errors.username?.message}

 

 

제작 기간

1일

 

사용 스택

• React.js
• React-Hook-Form