[react] formik - useFormik 예제

import "./styles.css";
import { useFormik } from "formik";

const formInitialValues = {
  regNoFront: "",
  regNoBack: ""
};

export default function App() {
  // form의 validation을 확인하는 validator
  const validator = (values) => {
    let error = {};
    // 에러객체가 있으면 handle submit이 되지 않는다.
    const { regNoFront, regNoBack } = values;
    console.log(regNoFront.length);

    if (regNoFront.length < 6) {
      error.regNoFront = "주민번호 앞자리가 짧습니다.";
    }
    if (regNoBack.length < 1) {
      error.regNoBack = "주민번호 뒷자리가 짧습니다.";
    }
    return error;
  };

  // formik 구조와 config를 설정하는 formik객체
  const myFormikObject = useFormik({
    // 설정할 초기값
    initialValues: formInitialValues,
    // 제출시 처리할 함수. 인자로 value객체를 가져온다.
    onSubmit: (values) => {
      // TODO handle submit
      const { regNoFront, regNoBack } = values;
      alert("처리", regNoFront, regNoBack);
    },
    // 값 변경시마다 validation 체크
    validateOnChange: true,
    // 인풋창 블러시에 validation 체크
    validateOnBlur: true,
    // validation 체크할 함수
    validate: validator
  });

  return (
    <div className="App">
      <h2>인풋 formik 예제</h2>
      <form
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center"
        }}
        onSubmit={myFormikObject.handleSubmit}
      >
        <label>주민번호 앞자리를 입력해주세요</label>
        <input
          id="regNoFront"
          type="text"
          maxLength="6"
          placeholder="000000"
          onChange={myFormikObject.handleChange}
        />
        <p>{myFormikObject.errors.regNoFront}</p>
        <label>주민번호 뒷자리를 입력해주세요</label>
        <input
          id="regNoBack"
          type="text"
          maxLength="1"
          placeholder="0"
          onChange={myFormikObject.handleChange}
        />
        <p>{myFormikObject.errors.regNoBack}</p>
        <button id="sendButton" type="submit">
          제출하기
        </button>
      </form>
    </div>
  );
}