[Node.js] Formik 란? / 사용법

Formik 란?

React에서 간단하게 form을 만들 수 있게 해주는 Node.js 패키지

 

react-hook-form 과의 차이점

react-hook-form은 폼의 조건을 각각 따로 적어주는 반면,

Formik는 폼의 조건을 한군데에 모아서 적어준다. 

 

Formik 설치 방법

npm i formik

 

Formik 사용법

//Login.js

// Formik 모듈 불러오기
import { ErrorMessage, Field, Form, Formik } from "formik";

const Login = () => {
  return (
    <div>
        <Formik
          initialValues={{ email: "", password: "" }}
          validate={(values) => {
            const errors = {};
            if (!values.email) {
              errors.email = "Required";
            } else if (
              !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
            ) {
              errors.email = "Invalid email address";
            }

            return errors;
          }}
          onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
              console.log(values);
              setSubmitting(false)
            }, 400);
          }}
        >
          {({ isSubmitting }) => (
            <Form>
              <Field type="email" name="email" />
              <ErrorMessage name="email" component="div" />
              <Field type="password" name="password" />
              <ErrorMessage name="password" component="div" />
              <button type="submit" disabled={isSubmitting}>
                Submit
              </button>
            </Form>
          )}
        </Formik>
    </div>
  );
};

export default Login

 

기능 설명

<Formik
// 폼을 사용할 전체 부분 감싸주기
 
  // 폼에 입력된 값을 values라는 변수에 담아서 가져와, 조건에 따라 검사
  validate={(values) => {
    // 조건에 어긋나면 저장할 공간 만들기
    const errors ={}
    
    // values.email 값이 존재하지 않으면
    if(!values.email){
      //errors.email에 에러메시지 저장
      errors.email = "이메일을 입력해주세요.";
      
    // values.email이 정규표현식 조건에 맞지 않으면
    } else if (
      !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
    ) {
      //errors.email에 에러메시지 저장
      errors.email = "이메일 형식이 올바르지 않습니다.";
    }
    
    // 검사 끝난 errors 돌려주기.
    return errors;
  }}
  
  // 폼이 submit 됐을때 실행할 함수 설정
  onSubmit={(values, {setSubmitting}) => {
    // 폼에 입력된 값들 콘솔에 출력하기
    console.log(values)
    // 버튼 다시 활성화 하기 ( 버튼 비활성화 기능 사용시 )
    setSubmitting(false)
  }
>

<Form
// 실제로 화면에 표시될 폼 작성해주기

  // name이 email인 입력창 만들기
  <Field type="email" name="email"/>
  // errors에서 name이 email인 부분 찾아서 div 컴포넌트로 출력하기
  <ErrorMessage name="email" component="div"/>
  
    // name이 password 입력창 만들기
  <Field type="password" name="password"/>
  // errors에서 name이 password 부분 찾아서 div 컴포넌트로 출력하기
  <ErrorMessage name="password" component="div"/>
  
  // isSubmitting이 true일때 비활성화 되는 submit 버튼 만들기
  <button type="submit" disabled={isSubmitting}>
    Submit
  </button>
</Form>

</Formik>