mobi-beginner-week-3

세번째 주차 목표

1. 새로운 라이브러리 사용에 두려움을 갖지 않기
2. 나만의 보일러 템플릿 만들기
3. 느슨한 관계 만들기
4. 리펙터링 해보기

1. React Hook Form & Yup

RHF(React Hook Form)은 <form>안에서 유효성 검사를 보다 쉽게 사용하기 위한 라이브러리에요!

RHF의 장점은 아래와 같습니다. 

1. 불필요한 랜더링 없이 유효성 검사를 실시간으로 진행이 가능합니다.
2. 유효성 검사를 위해 하나 하나 정규표현식과 코드를 작성하지 않아도 괜찮아요!

*** 아래와 같이 사용해볼 수 있어요 :)**

const {register, handleSubmit, formState: {errors} } = useFrom()

{error가 발생하면 errors에 register로 등록된 이름의 key값으로 담겨요!}
{watch는 사용시 리랜더가 반복됩니다. 되도록 사용하지 않도록 해봐요!}
{submit에는 반드시 handleSubmit을 사용해야해요}
{register에 option으로 다양한 유효성 검사 식을 넣을 수 있어요!}

<form onSubmt={handleSubmit(onsumbitFunc)}>
		<input placeholder="email" {...register("email", { required: true })} />
</form>

YUP은 RHF와 자주 사용하는 라이브러리이긴 하지만 정확히 말하면 어떠한 데이터의 스키마(제약조건)
을 확인하기 위하 라이브러리에요! 경우에 따라선 타입스크립트 대신 사용할 수도 있습니다.

const schema = yup.object().shape({
  email: yup
    .string()
    .email("이메일 양식이 올바르지 않습니다")
    .required("이메일을 입력해주세요"),
  password: yup
    .string()
    .min(8, "8글자 이상 입력해주세요")
    .required("비밀번호를 입력해주세요"),
});

// emil 양식으로 인한 validation 에러가 발생합니다.
const user = await schema.validate({
	email: "안녕하세요",
	password "12345678"
})

*** 아래와 같이 같이 쓸 수 있어요!

import { yupResolver } from '@hookform/resolvers/yup'**
{꼭 설치해주셔야 합니다!}

const {register, handleSubmit, formState: {isValid, errors}} = useForm({
    mode: 'onChange',
    resolver: yupResolver(schema)
})

****<>
    <form onSubmit={handleSubmit(onSubmit)}>
      <h1>로그인</h1>
      <input placeholder="email" {...register("email")}/>
      {errors.email && <p>{errors.email.message}</p>}

      <input placeholder="password" type="password" {...register("password")}/>
      {errors.password && <p>{errors.password.message}</p>}

      <button disabled={!isValid}>로그인</button>
    </form>
</>

과제1)

생각 해보기

(1) RHF를 사용했을 때의 장점에 대하여 정의하기
(2) 만약 유효성 검사를 하지 않는 곳에서 RHF를 사용하는 것은 올바른 행위일까?
(3) RHF에는 register 말고 contoller를 활용하는 방법이 있습니다. 두 방법의 차이는 무엇일까?

아래의 요구사항에 맞게 화면을 구현 해보세요.

‘Zl존피넛123’사이트의 회원가입 절차는 총 3단계로 이루어져있습니다.
아이디와 비밀번호를 입력합니다.
1. 아이디는 이메일 형태여야 하며 비밀번호는 8글자 이상 대소문자특수문자를 1자 이상 포함
연락처와 생년 월일을 입력합니다.
1. 핸드폰 번호는 13글자이며 010-0000-0000, 생년 월일은 YYYY-MM-DD 형식
하고싶은 말을 입력합니다. (100자 이상 300자 이내)
회원가입 버튼을 누르면 이전 단계에서 작성했던 모든 데이터가 alert에 노출되어야 합니다.
뒤로가기가 눌러지면 이전 폼의 데이터가 그대로 유지되어 있어야합니다.