formik&yup

간단한 레이아웃은 UI 프레임워크 antd design을 이용해서 로그인 만들기

---

Formik이란?

React Form Validation 폼태그 유효성 검증을 쉽게 도와주는 Formik

Form양식을 제출(submit)할 때, 가장 성가신 3요소

• 폼 상태에서 값 가져오기
• 유효성 검사 및 오류 메세지
• 폼 submit 핸들링

<Formik
        initialValues={{
          email: '',
          password: '',
        }}
        onSubmit={submit}
      >
        {({ handleChange, handleSubmit, values }) => (
          <Wrapper>
            <Form layout="vertical" onFinish={handleSubmit}>
              <Form.Item className="input-form" label="Email">
                <Input
                  ref={inputRef}
                  name="email"
				  value={formik.values.email}
                  onChange={handleChange}
                />
                <div className="error-message">
                  <ErrorMessage name="email" />
                </div>
              </Form.Item>
              <Form.Item className="input-form" label="Password">
                <Input.Password
                  name="password"
                  value={formik.values.password}
                  onChange={handleChange}
                />
                <div className="error-message">
                  <ErrorMessage name="password" />
                </div>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  로그인
                </Button>
              </Form.Item>
            </Form>
          </Wrapper>
        )}
      </Formik>

• handleSubmit : onSubmit 핸들러
• handleChange : 각 <input>, <select>, <textarea>에 전달하는 change핸들러
• values : 폼의 현재 value

Yup란?

Yup을 이용해서 유효성 검사를할 수 있다.
Yup은 JavaScript 객체 스키마 유효성 검사기,
사용자 지정 유효성 검사 규칙을 만드는데 편리하다.

const validationSchema = Yup.object().shape({
    email: Yup.string()
      .email('올바른 이메일 형식이 아닙니다!')
      .required('이메일을 입력하세요'),
    username: Yup.string().required('이름을 입력하세요!'),
    password: Yup.string()
      .max(15, '비밀번호는 최대 15자리까지입니다.')
      .required('패스워드를 입력하세요!'),
    password2: Yup.string()
      .oneOf([Yup.ref('password'), null], '비밀번호가 일치하지 않습니다')
      .required('패스워드를 다시 입력하세요!'),
  });

기존에 유효성 검사를 하는것보다 훨씬 가독성이 높다.

Formik, Yup를 이용한 유효성 검사

 <Formik
        initialValues={{
          email: '',
          password: '',
        }}
        validationSchema={validationSchema}
        onSubmit={submit}
      >
        {({ handleChange, handleSubmit, values }) => (
          <Wrapper>
            <Form layout="vertical" autoComplete="off" onFinish={handleSubmit}>
              <Form.Item className="input-form" label="Email">
                <Input
                  ref={inputRef}
                  name="email"
                  value={values.email}
                  onChange={handleChange}
                />
                <div className="error-message">
                  <ErrorMessage name="email" />
                </div>
              </Form.Item>
              <Form.Item className="input-form" label="Password">
                <Input.Password
                  name="password"
                  value={values.password}
                  onChange={handleChange}
                />
                <div className="error-message">
                  <ErrorMessage name="password" />
                </div>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  로그인
                </Button>
              </Form.Item>
            </Form>
            <SocialLogin>
              <img
                alt="구글 로고"
                src="/images/Google.png"
                onClick={SignInGoogle}
              />
              <img
                alt="카카오 로고"
                src="/images/kakao.png"
                onClick={SignInKakao}
              />
            </SocialLogin>
          </Wrapper>
        )}
      </Formik>