외부 라이브러리 - 유효성 체크 lib

대표적인 두가지 라이브러리

Yup & Formik

 

# 폼 유효성 체크 라이브러리 설치
# 1) formik
npm i formik

# 2) yup
npm i yup
npm i @types/yup

# import
import { Formik , Form , Field , ErrorMessage } from "formik";
import * as Yup from "yup";

 

 

중요 태그

태그	설명
Formik	Formik 라이브러리 사용 정의
Form	Form 태그 부분 정의 == form 태그
Field	Form 태그 안의 Field 부분 정의 == input 태그
ErrorMessage	Field 에러 메시지 부분 정의

 

 

Formik

                    <Formik                                
                      initialValues={initialValues}        
                      validationSchema={validationSchema}  
                      onSubmit={handleLogin}               
                    >
                    </Formik>

 

 

initialValues 객체 초기화

  // Todo : 유효성 체크 lib
  // Todo : Formik 객체 초기화 (initialValues) : html 태그에서
  // Todo : 체크대상 (email , password) : Field 태그
  const initialValues = { 
    email : "",
    password : ""
  }

 

 

validationSchema 함수 정의

  // Todo : 함수 정의
  // Todo : Formit 라이브러리 : validationSchema
  // Todo : validationSchema : 유효성 체크 규칙을 정의
  // Todo : validationSchema = Yup.object().shape({유효성 체크규칙})
  const validationSchema = Yup.object().shape({
    // email , password 유효성 규칙 : 
    // string() : 자료형이 문자열인가? 
    // required(에러메세지) => 필수필드
    email: Yup.string().required("email은 필수 입력입니다."),
    password: Yup.string().required("password는 필수 입력입니다."),
  });

 

 

간략적으로

import React from "react";
import "../../assets/css/login.css";
import { Formik , Form , Field , ErrorMessage } from "formik";
import * as Yup from "yup";

// 1) 로그인 로직
// 2) 유효성 체크 lib 적용 : Yup , Formik
function Login() {

  // Todo : 유효성 체크 lib
  // Todo : Formik 객체 초기화 (initialValues) : html 태그에서
  // Todo : 체크대상 (email , password) : Field 태그
  const initialValues = { 
    email : "",
    password : ""
  }

  // Todo : 함수 정의
  // Todo : Formit 라이브러리 : validationSchema
  // Todo : validationSchema : 유효성 체크 규칙을 정의
  // Todo : validationSchema = Yup.object().shape({유효성 체크규칙})
  const validationSchema = Yup.object().shape({
    // email , password 유효성 규칙 : 
    // string() : 자료형이 문자열인가? 
    // required(에러메세지) => 필수필드
    email: Yup.string().required("email은 필수 입력입니다."),
    password: Yup.string().required("password는 필수 입력입니다."),
  });


  return (
                      <Formik                                
                      initialValues={initialValues}        
                      validationSchema={validationSchema}  
                      onSubmit={handleLogin}               
                    >
                      {({ errors, touched }) => (
                        <Form className="user">
                          <div className="form-group">
                            <Field
                              type="email"
                              name="email"
                              className={
                                "form-control form-control-user mb-3" +
                                (errors.email && touched.email
                                  ? " is-invalid"
                                  : "")
                              }
                              placeholder="Enter Email Address..."
                            />
                            <ErrorMessage
                              name="email"
                              component="div"
                              className="invalid-feedback"
                            />
                          </div>

                          <div className="form-group">
                            <Field
                              type="password"
                              name="password"
                              className={
                                "form-control form-control-user mb-3" +
                                (errors.password && touched.password
                                  ? " is-invalid"
                                  : "")
                              }
                              id="exampleInputPassword"
                              placeholder="Password"
                            />
                            <ErrorMessage
                              name="password"
                              component="div"
                              className="invalid-feedback"
                            />
                          </div>

                          <button
                            type="submit"
                            className="btn btn-primary btn-user w-100 mb-3"
                          >
                            Login
                          </button>
                          <hr />
                          <a
                            href="/"
                            className="btn btn-google btn-user w-100 mb-2"
                          >
                            <i className="fab fa-google fa-fw"></i>&nbsp;Login
                            with Google
                          </a>
                          <a
                            href="/"
                            className="btn btn-naver btn-user w-100 mb-2"
                          >
                            <i className="fa-solid fa-n"></i>&nbsp;Login with
                            Naver
                          </a>
                          <a
                            href="/"
                            className="btn btn-kakao btn-user w-100 mb-3"
                          >
                            <i className="fa-solid fa-k"></i>&nbsp;Login with
                            Kakao
                          </a>
                        </Form>
                      )}
                    </Formik>
                      );
}

export default Login;

 

 

 

redux 와 함께

https://tinylittlelife.tistory.com/265